title: ng-messages not displaying validation errors properly
body: <p>I have made a basic form using angular material and would like to have specific error messages pop up when an input is invalid. I tried to model it after the <a href="https://material.angularjs.org/latest/demo/input" rel="nofollow">input example</a> on the official website, which uses the <code>ng-messages</code> directive to display the validation errors. For whatever reason, error messages only seem to get shown when the validation state transitions from valid to invalid.</p>
  
  <p>For example, there is an input like <code>&lt;input type="email" required&gt;</code> with an <code>&lt;ng-message when="email"&gt;</code> that says "Please enter a valid email." Writing an invalid email and then tabbing away to the next value triggers validation, the invalid style gets applied to the input and the message gets shown. If instead I immediately proceed to the next input without entering anything the element also gets the invalid style applied (because of the <code>required</code> attribute) and no message appears as expected (I did not include one for <code>required</code>). But if I focus the input again and write an invalid email, the message does not show up (even if I move focus away and back). The input element still has the invalid style applied to it however. The message only shows up again when I write an invalid email (causing the invalid style to be removed from the element) and then delete it to make it invalid again.</p>
  
  <p><a href="http://codepen.io/jlumpe/pen/QyOgzO" rel="nofollow">Here</a> is an example CodePen which shows his behavior, and displays the values of the form attributes. The markup is:</p>
  
  <pre><code>&lt;div ng-app="TestApp" layout="row" layout-align="center"&gt;
      &lt;div class="md-whiteframe-6dp md-margin" layout="column" flex="33"&gt;
          &lt;md-toolbar&gt;
              &lt;div class="md-toolbar-tools"&gt;
                  &lt;h3&gt;Sign Up&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/md-toolbar&gt;
          &lt;md-content class="md-padding"&gt;
              &lt;form name="signupForm" class="md-inline-form"&gt;
                  &lt;div layout-gt-xs="row"&gt;
                      &lt;md-input-container flex&gt;
                          &lt;label&gt;Username&lt;/label&gt;
                          &lt;input name="username" ng-model="user.username" required ng-minlength="6" autofocus/&gt;
                          &lt;ng-messages for="signupForm.username.$error"&gt;
                              &lt;ng-message when="minlength"&gt;
                                  Username must be at least 6 characters
                              &lt;/ng-message&gt;
                          &lt;/ng-messages&gt;
                      &lt;/ng-input-container&gt;
                  &lt;/div&gt;
                  &lt;div layout-gt-xs="row"&gt;
                      &lt;md-input-container flex&gt;
                          &lt;label&gt;Email&lt;/label&gt;
                          &lt;input type="email" name="email" ng-model="user.email" required/&gt;
                          &lt;ng-messages for="signupForm.email.$error"&gt;
                              &lt;ng-message when="email"&gt;
                                  Please give a valid email
                              &lt;/ng-message&gt;
                          &lt;/ng-messages&gt;
                      &lt;/ng-input-container&gt;
                  &lt;/div&gt;
                  &lt;div layout="column" layout-gt-xs="row" layout-align="center"&gt;
                      &lt;md-button type="submit" class="md-raised md-primary"&gt;
                          Register
                      &lt;/md-button&gt;
                      &lt;md-button type="button" class="md-primary"&gt;
                          Back to sign in
                      &lt;/md-button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/md-content&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The javascript is nothing but</p>
  
  <pre><code>angular.module("TestApp", ["ngMaterial", "ngMessages"]);
  </code></pre>
  
  <p>You can see the inputs are being correctly validated, but it looks like the message elements aren't having the right styles applied to them (<code>opacity: 1</code>) when they should.</p>