Angularjs Form binding issue

by rahilwazir

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<div ng-app="licenceApp" ng-controller="licenceController">
    <form name="licenceForm" ng-submit="applyKey()" novalidate> <span ng-show="!Applying">
            <input type="text" ng-model="licenceKey" ng-disabled="Applying" ng-model-options="{ debounce : { 'default' : 150 } }" username-available-validator required />
        {{ licenceKey }}
        </span>
        <input type="submit">
    </form>
</div>

JavaScript

angular.module('licenceApp', ['licenceApp.controllers', 'licenceApp.directives', 'licenceApp.services']);

angular.module('licenceApp.controllers', [])
    .controller('licenceController', function ($scope, licenceAPIservice, $filter) {
    $scope.licenceKey = "";
    $scope.Applying = false;

    $scope.applyKey = function () {
        $scope.Applying = true;

        // $scope.licenceKey is always empty here!!
        licenceAPIservice.applyKey($scope.licenceKey).then(function (data) {
            console.log(data);

            // Update model once we have applied the key
            $scope.update();
        }, function () {
            $scope.Applying = false;
        });
    };
});
angular.module('licenceApp.directives', [])
    .directive('usernameAvailableValidator', function ($http, $q, licenceAPIservice) {
    return {
        require: 'ngModel',
        link: function ($scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.usernameAvailable = function (modelUsername, viewUsername) {
                var deferred = $q.defer();
                console.log(arguments);
                var username = modelUsername || viewUsername;
                licenceAPIservice.validateKey(username).then(function (data) {
                    if (data.data) {
                        return true;
                        deferred.resolve(username);
                    } else {
                        deferred.reject();
                    }
                }, function () {
                    deferred.reject();
                });
                return deferred.promise;
            };
        }
    }
});
angular.module('licenceApp.services', [])
.factory('licenceAPIservice', function($q, $http, $timeout) {
    return {
        validateKey: function(v) {
            var defer = $q.defer();
            if (v) {
                defer.resolve(v);
            } else {
                defer.reject('!!');
            }
            return defer.promise;
        },
 ...