"Equal" validator for password input

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.3.12" data-semver="1.3.12" src="https://code.angularjs.org/1.3.12/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="equalDirective.js"></script>
</head>

<body>
  <h3>Angular password confirmation validator </h3>

  <div ng-app="customValidator" ng-controller="FormController">
    <div ng-form="foo">
      <div>
        <!-- Password field -->
        <input type="text" name="password" 
          required 
          id="password" 
          ng-model="password" 
          placeholder="Password" />
      </div>
      <div>
        <!-- Confirm Passwrod field -->
        <input type="text" name="confirmPassword"
          equal="password" 
          required 
          id="confirmPassword" 
          ng-model="confirmPassword" 
          placeholder="Confirm Password" />
      </div>

      <div>
        password is valid: {{foo.password.$valid}}
      </div>
      <div>
        confirmed password valid: {{foo.confirmPassword.$valid}}
      </div>
      <div>
        confirmed password equals password: {{!foo.confirmPassword.$error.equal}}
      </div>
    </div>
  </div>

</body>

</html>

angular
  .module('customValidator', [])
  .controller('FormController', function() {})
  
  .directive('equal', function() {

    return {
      require: 'ngModel',
      scope: {
        equal: '='
      },
      link: function(scope, elem, attrs, ctrl) {

        ctrl.$validators.equal = function(modelValue, viewValue) {
          return modelValue === scope.equal;
        };

        scope.$watch('equal', function(newVal, oldVal) {
          ctrl.$validate();
        });
      }
    };
  });

/* Styles go here */