<!DOCTYPE html>
<html>

<head>
     <link rel="stylesheet" href="style.css">
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
     <script>
          var app = angular.module("pwdApp", []);

          app.controller('pwdCtrl', function($scope) {
               $scope.password = {
                    pwd: {
                         required: true,
                         minlength: 6,
                         maxlength: 15
                    }
               }
          });
     </script>
</head>

<body ng-app="pwdApp" ng-controller="pwdCtrl">
     <div>
          <h3>Use of ng-minlength and ng-maxlength in AngularJs</h3></div>
     <form name="myForm">
          Password *
          <input type="password" name="myPassword" ng-model="myPassword" ng-minlength='{{password.pwd.minlength}}' ng-maxlength="{{password.pwd.maxlength}}" ng-required='password.pwd.required' />
          <span ng-show="myForm.myPassword.$dirty && myForm.myPassword.$error.required">Password is required!</span>
          <span ng-show="myForm.myPassword.$error.minlength">Input is too short!</span>
          <span ng-show="myForm.myPassword.$error.maxlength">Input is too long!</span>
     </form>
</body>

</html>
// Code goes here

input[type="password"] {
     width: 230px;height:25px;
     border: 1px solid #3366FF;
     border-left: 5px solid #3366FF;
}

.ng-dirty.ng-invalid {
     border-color: red !important;
}

span {
     color: red;
     font-size: 14px;
}