title: Error message does not hide after angular form validation
body: <p>This is my form my HTML</p>
  
  <pre><code>        &lt;form id = "myform" name="myform"  ng-submit="saveForm()" novalidate &gt;
  
              &lt;div class="input-group"&gt;
                  &lt;span class="input-group-addon"&gt; &lt;img src="/icon.png" alt=""/&gt; &lt;/span&gt;                    
                  &lt;input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="Username" autofocus required&gt;                    
              &lt;/div&gt;
              &lt;span ng-show="formInvalid"&gt;Please enter username&lt;/span&gt;
  
  
              &lt;button type="submit" class="btn btn-default" id="saveBtn"&gt; Save &lt;/button&gt;
          &lt;/form&gt;  
  </code></pre>
  
  <p>And inside the controller I have </p>
  
  <pre><code>$scope.formInvalid = false;
  
  $scope.saveForm = function(){  
    if($scope.myform.username.$invalid){  
         $scope.formInvalid = true;
    }
  
  if($scope.myform.$valid){
  //....save it....
  </code></pre>
  
  <p>At first the form has no error message, if I hit "Save" the "Please enter username" appears, so far, all good. </p>
  
  <p>But if I click on the form field to type a username, the error message does not go away. Even if I finish typing and click somewhere else, the error message still does not go away. </p>
  
  <p>I also try</p>
  
  <pre><code>  if(!$scope.myform.username.$valid){  
         $scope.formInvalid = true;
    }
  </code></pre>
  
  <p>and I also try together</p>
  
  <pre><code>  if(!$scope.myform.username.$valid){  
         $scope.formInvalid = true;
    }
  
    if($scope.myform.username.$valid){  
         $scope.formInvalid = false;
    }
  </code></pre>
  
  <p>and the problem is still there. How can I debug? How do I fix this?</p>
  
  <p>Thanks</p>