title: AngularJs user registration form: add a "repeat password" & check that passwords match
body: <p>I would like to use the AngularJs user registration from <a href="http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx" rel="nofollow">http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx</a> However, it only prompts for the password once.</p>
  
  <p>I would like to add a "repeat password field <strong>and</strong> also verify that both passwords are the same.</p>
  
  <p>What am I doing wrong here?</p>
  
  <pre><code>&lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;h2&gt;Register&lt;/h2&gt;
      &lt;div ng-show="vm.error" class="alert alert-danger"&gt;{{vm.error}}&lt;/div&gt;
      &lt;form name="form" ng-submit="vm.register()" role="form"&gt;
          &lt;div class="form-group" ng-class="{ 'has-error': form.name.$dirty &amp;&amp; form.name.$error.required }"&gt;
              &lt;label for="name"&gt;Full name&lt;/label&gt;
              &lt;input type="text" name="name" id="name" class="form-control" ng-model="vm.user.name" required /&gt;
              &lt;span ng-show="form.name.$dirty &amp;&amp; form.name.$error.required" class="help-block"&gt;First name is required&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="form-group" ng-class="{ 'has-error': form.email.$dirty &amp;&amp; form.email.$error.required }"&gt;
              &lt;label for="email"&gt;Email address&lt;/label&gt;
              &lt;input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" required /&gt;
              &lt;span ng-show="form.email.$dirty &amp;&amp; form.email.$error.required" class="help-block"&gt;Last name is required&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="form-group" ng-class="{ 'has-error': form.username.$dirty &amp;&amp; form.username.$error.required }"&gt;
              &lt;label for="username"&gt;Requested username&lt;/label&gt;
              &lt;input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required /&gt;
              &lt;span ng-show="form.username.$dirty &amp;&amp; form.username.$error.required" class="help-block"&gt;Username is required&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="form-group" ng-class="{ 'has-error': form.password.$dirty &amp;&amp; form.password.$error.required }"&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
              &lt;input type="password" name="password" id="password" class="form-control" ng-model="vm.user.password" required /&gt;
              &lt;span ng-show="form.password.$dirty &amp;&amp; form.password.$error.required" class="help-block"&gt;Password is required&lt;/span&gt;
  </code></pre>
  
  <h2>            </h2>
  
  <h2>- I am adding this, but it doesn't work :-(</h2>
  
  <pre><code>        &lt;div class="form-group" ng-class="{ 'has-error': form.password2.$dirty &amp;&amp; form.password2.$error.required }"&gt;
              &lt;label for="password2"&gt;Repeat password&lt;/label&gt;
              &lt;input type="password" name="password2" id="password2" class="form-control" ng-model="vm.user.password2" required /&gt;
              &lt;span ng-show="form.password2.$dirty &amp;&amp; form.password2.$error.required" class="help-block"&gt;Password is required&lt;/span&gt;
              &lt;span ng-show="form.password2.$dirty &amp;&amp; form.password2.$error.required &amp;&amp; form.password2 != form.password" class="help-block"&gt;Passwords do not match&lt;/span&gt;
  </code></pre>
  
  <h2>            </h2>
  
  <h2>-</h2>
  
  <pre><code>        &lt;div class="form-actions"&gt;
              &lt;button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary"&gt;Register&lt;/button&gt;
              &lt;img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /&gt;
              &lt;a href="#/login" class="btn btn-link"&gt;Cancel&lt;/a&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>