title: Angular AJAX form validation
body: <p>I am attempting to get some kind of basic AJAX form validation working with Angular but having no joy.  I feel like I've tried every example off the web but none work which lead me to wonder if I've missed something else out?  The custom directives never get called, whether I create them manually or copy and paste off the web.</p>
  
  <p>My HTML is set up like so:</p>
  
  <pre><code>&lt;div ng-app="licenceApp" ng-controller="licenceController"&gt;
      &lt;form name="licenceForm" novalidate&gt;
          &lt;h2&gt;Licence Key&lt;/h2&gt;
          Enter a valid licence key:&lt;span&gt;{{licenceForm.$valid}}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
  
          &lt;span style="position:relative;"&gt;
              &lt;input type="text" name="LicenceKey" ng-model="LicenceKey" style="width:312px; text-align:center;" username-available-validator required /&gt;
              &lt;span ng-if="licenceForm.LicenceKey.$pending"&gt;
                  Checking LicenceKey...
              &lt;/span&gt;
  
              &lt;input type="submit" value="Apply Key" class="linkbutton" id="applyLicenceKey" style="position: absolute;" ng-disabled="licenceForm.$invalid" /&gt;
          &lt;/span&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>My javascript code (whose HTTP call will currently fail as its <a href="http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html#asnychronous-validation-via-asyncvalidators" rel="nofollow">copied from elsewhere</a> in an attempt to get something working) is</p>
  
  <pre><code>angular.module('licenceApp')
      .directive('usernameAvailableValidator', ['$http', function ($http) {
          return {
              require: 'ngModel',
              link: function ($scope, element, attrs, ngModel) {
                  ngModel.$asyncValidators.usernameAvailable = function (username) {
                      return $http.get('/api/username-exists?u=' + username);
                  };
              }
          }
      }])
  
  // Register modules with the licence app
  angular.module('licenceApp', [
      'licenceApp.controllers',
      'licenceApp.services',
      'MyAngularFilters'
  ]);
  </code></pre>
  
  <p>Note that I am looking at Chromes console and see no request being made, I have also tried adding <code>console.log</code> to no avail.  What key piece am I missing?</p>