title: Is there a way to reset the $touched in Angular?
body: <p>I'm trying to implement a "Reset" button for my form. Some of my text fields use the $touched to determine if an error is displayed. But once the $touched flag is set, when I reset the model, $touched is not reset and so my error messages remain visible.</p>
  
  <pre><code>&lt;div class="col-sm-4" ng-class="{'has-error' : donationForm.firstName.$invalid &amp;&amp; donationForm.firstName.$touched}"&gt;
                  &lt;label for="firstName" class="control-label"&gt;First Name&lt;/label&gt;
                  &lt;input type="text" id="firstName" name="firstName" class="form-control"
                         ng-model="editableDonation.person.firstName" ng-required="true" ng-maxlength="20" /&gt;
                  &lt;span class="help-block" ng-show="donationForm.firstName.$error.required &amp;&amp; donationForm.firstName.$touched"&gt;
                      First Name is required.
                  &lt;/span&gt;
                  &lt;span class="help-block" ng-show="donationForm.firstName.$error.maxlength"&gt;
                      First Name is too long (20 max).
                  &lt;/span&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to do that?</p>
  
  <p>My resetForm:</p>
  
  <pre><code>$scope.resetForm = function () {
          $scope.donationForm.$setPristine();
          $scope.model = '';
  
          $scope.donation = donationService.defaultDonation;
          $scope.editableDonation = angular.copy($scope.donation);
      };
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/Oa91ZkTatsddSA4oujQK">http://plnkr.co/edit/Oa91ZkTatsddSA4oujQK</a></p>