Angular Password Strength Indicator

passwordModule.html

<div ng-app="passwordModule" ng-controller="credentialsController" class="container">
  <form name="form">
 
      <div class="form-group">
        <label for="password">Password</label>
        <input type="text" name="password" id="password" ng-model="credentials.password" ng-model-options="{allowInvalid: true}" pattern-validator="((?=.*\d)(?=.*[A-Z])(?=.*\W).{8,8})" class="form-control" />
      </div>
 
      <div class="form-group">
        <label>Password Strength</label>
        <password-strength ng-model="credentials.password"></password-strength>
      </div>
 
      <div class="alert alert-error" ng-show="form.password.$error.passwordPattern">The password does not meet requirements!</div>
 
    </form>
  </div>