Password Match form validation in AngularJS

I am stuck in a form validation to change password where i need to take a specific length of password (like combination of special characters, alphabets and numbers) from user and confirm it by re-enter password. Actually i am using the ng-pattern property of angular js to match the password of both input boxes but the problem is ng-pattern is only match if your are passing simple string. It don't work to match the string with the special charecters. See below example-

Not Working :

<input type="password" name="password" class="span4" ng-model="user.password" ng-pattern="/^(?=(?:[^A-Z]*[A-Z]){2})(?=[^!@#$&*\%\^\)\(]*[!@#$&*\%\^\)\(])(?=(?:[^0-9]*[0-9]){2}).{8,}$/">

<input type="password" name="password2" class="span4" ng-model="user.password2" ng-pattern="user.password">

Working :

<input type="password" id="password" name="password" ng-model="user.password" ng-pattern="/^(?=(?:[^A-Z]*[A-Z]){2})(?=[^!@#$&*\%\^\)\(]*[!@#$&*\%\^\)\(])(?=(?:[^0-9]*[0-9]){2}).{8,}$/">

<input type="password" name="password2" class="span4" ng-model="user.password2" pw-check="password">

So to match the password of both text boxes input i created a simple directive (pwCheck) below is my compleate code :

Below is my directive :

.directive('pwCheck', [function () {
 return {
   require: 'ngModel',
   link: function (scope, elem, attrs, ctrl) {
  var firstPassword = '#' + attrs.pwCheck;
  elem.add(firstPassword).on('keyup', function () {
    scope.$apply(function () {
   var v = elem.val()===$(firstPassword).val();
   ctrl.$setValidity('pwmatch', v);
    });
  });
   }
 }
}]);

Below is my html code :

<form name="registerForm" id="registerForm" ng-submit="editAccountPassword(user, registerForm)" class="form-horizontal" novalidate>
 <div class="modal-body">
  <div class="col-md-12">
  <span class="alert alert-danger ng-cloak" ng-show="registerForm.password2.$error.pwmatch && !registerForm.password.$error.pattern">Passwords should match !!</span>
  </div>
  <div class="col-md-12">
  <span class="alert alert-danger ng-cloak" ng-show="registerForm.password.$error.pattern">Password should be minimum 8 character long and it should contain 2 upper case letters, 1 special character, 2 digits & 1 lower case letter</span>
  </div>
  
  <div class="widget-content">  
   <div class="control-group">           
    <label for="password" class="col-md-4 col-sm-4 col-xs-12 field-name text-padding">New Password</label>
    <div class="col-md-8 col-sm-8 col-xs-12">
     <input type="password" id="password" name="password" class="span4" ng-model="user.password" required="" ng-pattern="/^(?=(?:[^A-Z]*[A-Z]){2})(?=[^!@#$&*\)\(]*[!@#$&*\)\(])(?=(?:[^0-9]*[0-9]){2}).{8,}$/">
    </div>   
   </div>
   
   <div class="control-group" ng-class="{'has-error': registerForm.password2.$invalid && registerForm.password2.$dirty}">           
    <label for="password" class="col-md-4 col-sm-4 col-xs-12 field-name text-padding">{{'Retype New Password' | translate}}</label>
    <div class="col-md-8 col-sm-8 col-xs-12">
     <input type="password" name="password2" class="span4" ng-model="user.password2"  required="" pw-check="password">
      </div>
    </div>   
   </div>
  </div>
 </div>
</form>

Preview :

If you like this post please leave a comment.

Chears 
Happy Coding :)