title: How do I reset a form including removing all validation errors?
body: <p>I have an Angular form. The fields are validated using the <code>ng-pattern</code> attribute. I also have a reset button. I'm using the <a href="http://angular-ui.github.io/ui-utils/" rel="noreferrer">Ui.Utils Event Binder</a> to handle the <code>reset</code> event like so:</p>
  
  <pre><code>&lt;form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()"&gt;
    &lt;div&gt;
      &lt;label&gt;
        Area Code
        &lt;input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/"&gt;
      &lt;/label&gt;
  
      &lt;div ng-messages="searchForm.areaCode.$error"&gt;
        &lt;div class="error" ng-message="pattern"&gt;The area code must be three digits&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label&gt;
        Phone Number
        &lt;input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/"&gt;
      &lt;/label&gt;
  
      &lt;div ng-messages="searchForm.phoneNumber.$error"&gt;
        &lt;div class="error" ng-message="pattern"&gt;The phone number must be seven digits&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br&gt;
    &lt;div&gt;
      &lt;button type="reset"&gt;Reset&lt;/button&gt;
      &lt;button type="submit" ng-disabled="searchForm.$invalid"&gt;Search&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As you can see, when the form is reset it calls the <code>reset</code> method on the <code>$scope</code>. Here's what the entire controller looks like:</p>
  
  <pre><code>angular.module('app').controller('mainController', function($scope) {
      $scope.resetCount = 0;
  
      $scope.reset = function(form) {
          form.$setPristine();
          form.$setUntouched();
          $scope.resetCount++;
      };
  
      $scope.search = function() {
          alert('Searching');
      };
  });
  </code></pre>
  
  <p>I'm calling <code>form.$setPristine()</code> and <code>form.$setUntouched</code>, following the advice from <a href="https://stackoverflow.com/questions/26015010/angularjs-form-reset-error">another question</a> here on Stack Overflow. The only reason I added the counter was to prove that the code is being called (which it is).</p>
  
  <p>The problem is that even after reseting the form, the validation messages don't go away. You can see the full code on <a href="http://plnkr.co/edit/gDlhFCmjCmpBSmWrSzQg?p=preview" rel="noreferrer">Plunker</a>. Here's a screenshot showing that the errors don't go away:</p>
  
  <p><img src="https://i.stack.imgur.com/Cilpl.png" alt="Validation Errors"></p>