Angular.js Custom Validator

app.js

var deps = [
  'myapp.services',
  'myapp.directives',
  'myapp.controllers'
];

var app = angular.module('myapp', deps);

controllers.js

var controllers = angular.module('myapp.controllers', []);

var MyAppController = [
  "$scope",
  "checkUserName",
  function ($scope, checkUserName) {
    $scope.checkUserName = checkUserName;
  }
]

controllers.controller('MyAppController', MyAppController);

directives.js

var directives = angular.module('myapp.directives', []);

directives.directive('duplicate', [
  function() {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ctrl) {
        var fun = function() {
          scope[attrs.duplicate](elem.val(), function(valid) {
            ctrl.$setValidity('duplicate', !!valid);
          });
        };
        // Validate as the model changes
        scope.$watch(attrs.ngModel, fun);
        // Check the value on load
        fun();
      }
    }
  }
]);

services.js

var services = angular.module('myapp.services', []);

services.factory('checkUserName', [
  '$http',
  function($http) {
    var reqs = {};
    return function(contactName, done) {
      // Make an $http call here to check with the server
      done(null, false);
    };
  }
]);

view.html

<div data-ng-app="myapp" data-ng-controller="MyAppController">
  <input data-ng-model="userName" type="text" data-duplicate="checkUserName">
</div>