title: Angular reset form not working
body: <p>I am developing an application where I am using bootstrap and angular together. Form validation using angular and bootstrap is working fine but I have a problem to reset the form. I call $setPristine() but it doesn't seem to be doing anything.</p>
  <p>Here is my html.</p>
  <pre><code> &lt;div class=&quot;cl-xs-12&quot; style=&quot;margin-top:20px&quot;&gt;
  &lt;div class=&quot;col-xs-3&quot;&gt;&lt;/div&gt;
  &lt;div ng-controller=&quot;AddUpdateUserController&quot; class=&quot;col-xs-6&quot;&gt;
      &lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot; id=&quot;addEditMemberForm&quot; name=&quot;addEditMemberForm&quot; ng-submit=&quot;addUpdateMember(member)&quot; novalidate&gt;
          &lt;input type=&quot;hidden&quot; id=&quot;mmeberId&quot;, name=&quot;memberId&quot; ng-model=&quot;member.id&quot;&gt;
          &lt;div class=&quot;form-group required&quot; ng-class=&quot;{ 'has-error': addEditMemberForm.firstName.$invalid &amp;&amp; addEditMemberForm.firstName.$dirty}&quot;&gt;
              &lt;label for=&quot;firstName&quot; class=&quot;control-label col-xs-4&quot;&gt;First Name&lt;/label&gt;
              &lt;div class=&quot;col-xs-8&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;firstName&quot; name=&quot;firstName&quot; placeholder=&quot;First Name&quot; ng-model=&quot;member.firstName&quot; ng-pattern=&quot;/^[0-9A-Za-z]+$/&quot; required&gt;
                  &lt;div ng-show=&quot;addEditMemberForm.$submitted || addEditMemberForm.firstName.$touched&quot; ng-messages=&quot;addEditMemberForm.firstName.$error&quot;&gt;
                      &lt;div ng-show=&quot;addEditMemberForm.firstName.$error.required&quot; class=&quot;validationErrorMessage&quot;&gt;First Name is required&lt;/div&gt;
                      &lt;div class=&quot;validationErrorMessage&quot; ng-message=&quot;pattern&quot;&gt;First name is invalid. Only Alphanumeric characters are allowed&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group required&quot; ng-class=&quot;{ 'has-error': addEditMemberForm.middleName.$invalid &amp;&amp; addEditMemberForm.middleName.$dirty}&quot;&gt;
              &lt;label for=&quot;lastName&quot; class=&quot;control-label col-xs-4&quot;&gt;Middle Name&lt;/label&gt;
              &lt;div class=&quot;col-xs-8&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;middleName&quot; name=&quot;middleName&quot; placeholder=&quot;Middle Name&quot; ng-model=&quot;member.middleName&quot; ng-pattern=&quot;/^[0-9A-Za-z]+$/&quot; required&gt;
                  &lt;div ng-show=&quot;addEditMemberForm.$submitted || addEditMemberForm.middleName.$touched&quot; ng-messages=&quot;addEditMemberForm.middleName.$error&quot;&gt;
                      &lt;div class=&quot;validationErrorMessage&quot; ng-message=&quot;required&quot;&gt;Middle name is required.&lt;/div&gt;
                      &lt;div class=&quot;validationErrorMessage&quot; ng-message=&quot;pattern&quot;&gt;Middle name is invalid. . Only Alphanumeric characters are allowed&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group required&quot; ng-class=&quot;{ 'has-error': addEditMemberForm.lastName.$invalid &amp;&amp; addEditMemberForm.lastName.$dirty}&quot;&gt;
              &lt;label for=&quot;lastName&quot; class=&quot;control-label col-xs-4&quot;&gt;Last Name&lt;/label&gt;
              &lt;div class=&quot;col-xs-8&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;lastName&quot; name=&quot;lastName&quot; placeholder=&quot;Last Name&quot; ng-model=&quot;member.lastName&quot; ng-pattern=&quot;/^[0-9A-Za-z]+$/&quot; required&gt;
                  &lt;div ng-show=&quot;addEditMemberForm.$submitted || addEditMemberForm.lastName.$touched&quot; ng-messages=&quot;addEditMemberForm.lastName.$error&quot;&gt;
                      &lt;div ng-show=&quot;addEditMemberForm.lastName.$error.required&quot; class=&quot;validationErrorMessage&quot;&gt;Last Name is required&lt;/div&gt;
                      &lt;div class=&quot;validationErrorMessage&quot; ng-message=&quot;pattern&quot;&gt;Last name is invalid. . Only Alphanumeric characters are allowed&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
      &lt;/form&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;label&gt;{{message}}&lt;/label&gt;
      &lt;/div&gt;
      &lt;label ng-model=&quot;status&quot;&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-xs-3&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is my Javascript:</p>
  <pre><code>angular.module('SiteControllerModule').controller('AddUpdateUserController', ['$scope', '$http', '$location', function($scope, $http, $location){     
      $scope.resetForm = function () {            
          $scope.member = null;
          $scope.addEditMemberForm.$setPristine();            
      }
  }]);
  </code></pre>
  <p>When $setPristine is called, my form is still dirty and looks like it left behind my Bootstrap validation Error.</p>
  <p><a href="https://i.stack.imgur.com/gbiP3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gbiP3.png" alt="Form Still Dirty" /></a></p>
  <p>Any help related to this is appreciated.</p>
  <p>Thanks</p>