title: Call async service in AngularJS custom validation directive
body: <p>I have a directive for custom validation (verify a username doesn't already exist).  The validation uses the $http service to ask the server if the username exists, so the return is a promise object.  This is working fantastic for validation.  The form is invalid and contains the myform.$error.usernameVerify when the username is already taken.  However, user.username is always undefined, so it's breaking my ng-model directive.  I think this is probably because the function in .success is creating it's own scope and the return value isn't used on the controllers $scope. How do I fix this so the ng-model binding still works?</p>
  
  <pre><code>commonModule.directive("usernameVerify", [
      'userSvc', function(userSvc) {
          return {
              require: 'ngModel',
              scope: false,
              link: function(scope, element, attrs, ctrl) {
                  ctrl.$parsers.unshift(checkForAvailability);
                  ctrl.$formatters.unshift(checkForAvailability);
  
                  function checkForAvailability(value) {
                      if (value.length &lt; 5) {
                          return value;
                      }
                      // the userSvc.userExists function is just a call to a rest api using $http
                      userSvc.userExists(value)
                          .success(function(alreadyUsed) {
                              var valid = alreadyUsed === 'false';
                              if (valid) {
                                  ctrl.$setValidity('usernameVerify', true);
                                  return value;
                              } 
                              ctrl.$setValidity('usernameVerify', false);
                              return undefined;
                          });
                  }
              }
          }
      }
  ]);
  </code></pre>
  
  <p>Here is my template: </p>
  
  <pre><code>&lt;div class="form-group" ng-class="{'has-error': accountForm.username.$dirty &amp;&amp; accountForm.username.$invalid}"&gt;
      &lt;label class=" col-md-3 control-label"&gt;Username:&lt;/label&gt;
      &lt;div class="col-md-9"&gt;
          &lt;input name="username"
                 type="text"
                 class="form-control"
                 ng-model="user.username"
                 ng-disabled="user.id"
                 ng-minlength=5
                 username-verify
                 required /&gt;
          &lt;span class="field-validation-error" ng-show="accountForm.username.$dirty &amp;&amp; accountForm.username.$error.required"&gt;Username is required.&lt;/span&gt;
          &lt;span class="field-validation-error" ng-show="accountForm.username.$dirty &amp;&amp; accountForm.username.$error.minlength"&gt;Username must be at least 5 characters.&lt;/span&gt;
          &lt;span class="field-validation-error" ng-show="accountForm.username.$dirty &amp;&amp; accountForm.username.$error.usernameVerify"&gt;Username already taken.&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>