title: ng-message disappears when $error changes while animation is in progress
body: <p>I have a form with a custom async validator. I recognized that sometimes the error message disappears even if the value in an input field is invalid.</p>
  
  <p>I was able to reproduce the problem with a normal validator: <a href="http://codepen.io/anon/pen/EjqJJR" rel="nofollow">codepen example</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="FormController" layout-padding&gt;
    &lt;form name="inputForm"&gt;
      &lt;md-input-container&gt;
        &lt;input type="text" name="inputValue" custom-validator ng-model="model.value" /&gt;
        &lt;label&gt;input value&lt;/label&gt;
        &lt;div ng-messages="inputForm.inputValue.$error"&gt;
          &lt;div ng-message="custom-validator"&gt;This field is invalid&lt;/div&gt;
        &lt;/div&gt;
      &lt;/md-input-container&gt; 
      &lt;div&gt;inputForm.inputValue.$error = {{inputForm.inputValue.$error | json}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var app = angular.module('app', ['ngMaterial', 'ngMessages']);
  
  app.controller('FormController', ['$scope', function($scope) {
    $scope.model = {
      value: '',
      asyncValue: ''
    }
  }]);
  
  app.directive('customValidator', function() {
    return {
      require: 'ngModel',
      link: function (scope, element, attr, ctrl) {
        ctrl.$validators['custom-validator'] = function(model, view) {
          return (model.length % 2) == 0;
        }
      }
    }
  })
  </code></pre>
  
  <p>When I type in a value slow the error message correctly appears and disappears. But when I type fast the error message disappers even if the input is invalid. It seems that the problem occurs when the $error value changes while the animation of the error message is still in progress.</p>
  
  <p>Is there something I did wrong?</p>