<!DOCTYPE html>
<html ng-app="app">

  <head>
    <title>
  Confirm Password Validation in AngularJS
    </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
    <style>
    .ng-invalid {
      border-color: red;
      outline-color: red;
    }
    .ng-valid {
      border-color: green;
      outline-color: green;
    }
  </style>
    <script>
    var app = angular.module("app", []);
    app.controller("confirmCtrl", function($scope) {
      
      $scope.user = {
        password: "",
        confirmPassword: ""
      };
    });

    app.directive("compareTo", function() {
      return {
        require: "ngModel",
        scope: {
          confirmPassword: "=compareTo"
        },
        link: function(scope, element, attributes, modelVal) {

          modelVal.$validators.compareTo = function(val) {
            return val == scope.confirmPassword;
          };

          scope.$watch("confirmPassword", function() {
            modelVal.$validate();
          });
        }
      };
    });
  </script>
  </head>

  <body ng-controller="confirmCtrl">
    <form>
      <lable></lable>
      <div>
        <label>Password</label>
        <input type="password" name="pwd" ng-model="user.password" required="" class="form-control" />
      </div>
      <div>
        <label>Confirm Password</label>
        <input type="password" name="confirmPassword" ng-model="user.confirmPassword" required="" compare-to="user.password" class="form-control" />
      </div>
    </form>
  </body>

</html>