title: angularjs form reset error
body: <p>i'm trying to do a form with validations using angularjs and so far i did a good job. But when i commit my reset button all the fields reset except for the error messages i get from my validation part. How can i get rid of all the fields and error messages when i reset my form.</p>
  
  <p>This is how it is when i press my reset button</p>
  
  <p><img src="https://i.stack.imgur.com/ZzSfe.jpg" alt="enter image description here"></p>
  
  <p>this is my code</p>
  
  <pre><code>&lt;div class="page-header"&gt;&lt;center&gt;&lt;h2&gt;Give us your Feedback&lt;/h2&gt;&lt;/center&gt;&lt;/div&gt;
  
      &lt;!-- pass in the variable if our form is valid or invalid --&gt;
      &lt;form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate&gt;
  
          &lt;!-- NAME --&gt;
          &lt;div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid &amp;&amp; !userForm.name.$dirty }"&gt;
              &lt;label&gt;Name*&lt;/label&gt;
              &lt;input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required&gt;
              &lt;p ng-show="userForm.name.$invalid &amp;&amp; !userForm.name.$pristine " class="help-block"&gt;
                  &lt;font color="#009ACD"&gt;You name is required.&lt;/font&gt;
              &lt;/p&gt;
          &lt;/div&gt;
  
           &lt;!-- EMAIL --&gt;
          &lt;div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid &amp;&amp; !userForm.email.$dirty  }"&gt;
              &lt;label&gt;Email&lt;/label&gt;
              &lt;input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required &gt;
              &lt;p ng-show="userForm.email.$invalid &amp;&amp; !userForm.email.$pristine" class="help-block"&gt;
                  &lt;font color="#009ACD"&gt;Enter a valid email.&lt;/font&gt;
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- USERNAME --&gt;
          &lt;div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid &amp;&amp; !userForm.username.$dirty }"&gt;
              &lt;label&gt;Description&lt;/label&gt;
              &lt;input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required&gt;
              &lt;font color="white"&gt;
                  &lt;p ng-show="userForm.username.$error.minlength" class="help-block"&gt;
                      &lt;font color="#009ACD"&gt;Description is too short.&lt;/font&gt;
                  &lt;/p&gt;
                  &lt;p ng-show="userForm.username.$error.maxlength" class="help-block"&gt;
                      &lt;font color="#009ACD"&gt;Description is too long.&lt;/font&gt;
                  &lt;/p&gt;
              &lt;/font&gt;
          &lt;/div&gt;
  
          &lt;div class="col"style="text-align: center"&gt;
              &lt;button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
                  type="reset"
                  ng-click="reset()" padding-top="true"
              &gt;
                  Reset
              &lt;/button&gt;
  
  
              &lt;button class="button button-block button-positive"  style="display: inline-block;width:100px "
                  ng-click="submit()"
                  padding-top="true"
              &gt;
                  Submit
              &lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My controller</p>
  
  <pre><code>.controller('ContactCtrl', function($scope,$state,$ionicPopup, $timeout) {
      $scope.showfeedback = function() {
          $state.go('app.sfeedback');
      };
  
      $scope.submitForm = function(isValid) {
          $scope.submitted = true;
  
          // check to make sure the form is completely valid
          if (!isValid) {
              var alertPopup = $ionicPopup.alert({
                  title: 'Invalid data entered!',
              });
          } else {
              var alertPopup = $ionicPopup.alert({
                  title: 'Feedback submitted',
              });
          }
      };
  
      $scope.reset = function() {
          var original = $scope.user;
          $scope.user= angular.copy(original)
          $scope.userForm.$setPristine()
      };
  })
  </code></pre>