title: Displaying server message from $asyncValidators
body: <p>I'm using AngularJS to send asynchronous validations. How do I display an error message fetched from server via <code>$asyncValidators</code>?</p>
  
  <p>I have a <code>validateName</code> directive which uses <code>$asyncValidators</code> to validate <code>user.name</code> at the server. If the validation fails, the server responds with an <code>errorMessage</code>.</p>
  
  <pre><code>angular.module('myapp').directive('validateName', function($http, $q) {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl) {
        ctrl.$asyncValidators.name = function(modelValue, viewValue) {
          if( ctrl.$dirty ) {
            return $http.post('/validate-username', {username: viewValue}).then(function(response) {
              if (!response.data.validUsername) {
                return $q.reject(response.data.errorMessage);
              }
              return true;
            });
          } else {
            return $q.resolve(true);
          }
        };
      }
    };
  });
  </code></pre>
  
  <p>Below is my input field that uses the directive. I would like to display the <code>errorMessage</code> below that field.</p>
  
  <pre><code>&lt;input name="name" class="form-control" ng-model="user.name" validate-name&gt;
  &lt;!-- Here I would like to display the errorMessage somehow --&gt;
  </code></pre>