title: AngularJS custom directive doesn't load
body: <p>I'm using angular 1.4.x.</p>
  
  <p>I'm making a custom directive that checks weather a field is unique on the server (the field is called "jmbg"). I have the following code:</p>
  
  <pre><code>(function() {
  angular
      .module('app')
      .directive('uniqueJmbg', uniqueJmbg);
  
  uniqueJmbg.$inject = ['$q', '$http'];
  function uniqueJmbg($q, $http) {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, elem, attrs, ngModelCtrl) {
          ngModelCtrl.$asyncValidators.uniqueJmbg = function(modelValue, viewValue) {
              var value = modelValue || viewValue;
  
              return $http.get('/server/users/' + value)
                  .then(function resolved() {
                      return $q.reject('exists');
                  }, function rejected() {
                      return true;
               });
          };
      }
  }
  })();
  </code></pre>
  
  <p>I am using the directive in HTML in the following way:</p>
  
  <pre><code>&lt;input class="form-control" type="text" id="jmbg" name="jmbg" ng-model="rad.radnik.jmbg" ng-model-options="{ updateOn: 'default blur', debounce: {'default':400, 'blur':0 } }" unique-jmbg/&gt;
  </code></pre>
  
  <p>In case it matters, I'm using my controllers with the controllerAs syntax.
  Now, what happens is that the file containing my uniqueJmbg definition never loads (I can't see it in the browser debugger). If I move my code to a component which does load the app stops working (and there are no errors in the console), so there is no way for me to debug this.</p>
  
  <p>Any idea what might be so wrong I can't even access the code in the browser?</p>