пользовательская директива angularJS для таймера не работает

Поэтому у меня есть настраиваемая директива для моего таймера, использующего только элемент. Вход работает, и ярлык, который я сделал на заказ, но плагин timepicker, который я использовал, не будет работать. Я использую этот плагин для моего timepicker: http://timepicker.co/options/.

Это мой html:

  <apple-timepicker label="Time Picker: " a-id="time" ng-model="fieldTime" ></apple-timepicker>{-fieldTime-}

И моя настраиваемая директива js:

  apple.directive('appleTimepicker', function(){
var linker = function (scope, element, attrs, ngModel) {
    $(element).timepicker({
        timeFormat: 'h:mm p',
        interval: 15, // 15 minutes
        change: function(time) {
            scope.$apply(function() {
                // the input field
                var element = $(this), text;
                // get access to this TimePicker instance
                var timepicker = element.timepicker();
                text = timepicker.format(time);
                ngModel.$setViewValue(text);
            });
        }
    });
};
return {
    restrict: 'E',
    require: 'ngModel',
    template: '<label for="inputTimepicker">{-fieldLabel-}</label>'+
                '<div>'+
                    '<input type="text" id={-fieldId-} ng-model="fieldTime" readonly="true"/>'+
                '</div>',
    scope: {
        fieldLabel: '@label',
        fieldId: '@aId',
        fieldTime: '=ngModel'
    },
    controller: ['$scope',function($scope) {

    }],
    link: linker
};
});