Untitled

<!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>