title: ngMessages: how to hide or show one message after the other
body: <p>I have the following code:</p>
  
  <pre><code>&lt;div id="messageArea"&gt;
     &lt;div ng-messages="text1.$error"&gt;
        &lt;div ng-message="required"&gt;
           Text1 is required ...
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div ng-messages="text2.$error"&gt;
        &lt;div ng-message="required"&gt;
           Text2 is required ...
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div ng-messages="text3.$error"&gt;
        &lt;div ng-message="required"&gt;
           Text3 is required ...
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;Text1&lt;input id="text1"  ng-model="text1" name="text1" ng-required="true"&gt;&lt;/div&gt;
  &lt;div&gt;Text2&lt;input id="text2"  ng-model="text2" name="text2" ng-required="true"&gt;&lt;/div&gt;
  &lt;div&gt;Text3&lt;input id="text3"  ng-model="text3" name="text3" ng-required="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I wanted to show one error message at a time. When the first error is solved then the next error message will show. Anyone has any idea how I can do this? Thanks.</p>