title: Angular Compare Password Directive
body: <p>I have this form that has a password filed and a confirmPassword field. I want to compare the password field against the confirmPassword field. I'm having a little of a problem doing so, because I have an ng-show that should only display a "Passwords Do Not Match" error when the password don't match but at the moment the messages always shows.</p>
  
  <pre><code>    &lt;label class="control-label"&gt;Password *
    &lt;div class="row m-b-15"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;input type="text" placeholder="Password" name="password" required="" ng-model="user.password" class="form-control"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;label class="control-label"&gt;Re-enter Password *&lt;/label&gt;
    &lt;div class="row m-b-15"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;input type="text" placeholder="Re-enter Password" name="confirmPassword" required="" ng-model="user.confirmPassword" ka-compare-to="user.password" class="form-control"/&gt;
        &lt;div ng-show="signUpForm.confirmPassword.$error" class="form-group has-error"&gt;
          &lt;label class="control-label"&gt;Passwords Do Not Match&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/label&gt;
  
  .directive('kaCompareTo', function(){
  
      return {
          restrict: 'A',
          require: 'ngModel',
          scope: {
              otherModelValue: '=kaCompareTo'
          },
          link: function(scope, element, attributes, ngModel){
  
              ngModel.$validators.kaCompareTo = function(modelValue){
  
                  return modelValue === scope.otherModelValue;
              };
  
              scope.$watch("otherModelValue", function() {
  
                  ngModel.$validate();
              });
  
          }
  
      }
  
  })
  </code></pre>
  
  <p>Thanks in advance.</p>