title: Show ng-message content only when validation fails in Angularjs
body: <p>I have found some custom code online for simple login form:</p>
  
  <pre><code>&lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;h2&gt;Login&lt;/h2&gt;
      &lt;form name="form" ng-submit="form.$valid &amp;&amp; vm.login()" novalidate&gt;
          &lt;div class="form-group" ng-class="{ 'has-error': form.$submitted &amp;&amp; form.username.$invalid }"&gt;
              &lt;label for="username"&gt;Username&lt;/label&gt;
              &lt;input type="text" name="username" class="form-control" ng-model="vm.username" required /&gt;
              &lt;div ng-messages="form.$submitted &amp;&amp; form.username.$error" class="help-block"&gt;
                  &lt;div ng-message="required"&gt;Username is required&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group" ng-class="{ 'has-error': form.$submitted &amp;&amp; form.password.$invalid }"&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
              &lt;input type="password" name="password" class="form-control" ng-model="vm.password" required /&gt;
              &lt;div ng-messages="form.$submitted &amp;&amp; form.password.$error" class="help-block"&gt;
                  &lt;div ng-message="required"&gt;Password is required&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;button class="btn btn-primary"&gt;Login&lt;/button&gt;
          &lt;/div&gt;
          &lt;div ng-if="vm.error" class="alert alert-danger"&gt;{{vm.error}}&lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently, ng-messages with content: 'Username is required' and 'Password is required' are always visible. 
  Is there any chance I can change this code in a way I see that messages only when authentication fails?</p>
  
  <p>Or in other words can I hide them in HTML, because I guess I have to show them through angular code.</p>