Jquery Timepicker doesn't update model in AngularJS directive

Question

When I press any keyboard key, e.g. 0, and if I lose focus, it automatically gets set to control as 00:00, but it does not update the model value.

angular.module('test').directive('timePicker', [function () {
return {
  restrict: 'A',
  require: 'ngModel',
  scope: {
    model: '=ngModel'
  },
  link: function ($scope, element, attrs, ngModelCtrl) {

    element.timepicker({'timeFormat' : 'H:i'});

    ////element.on('change', function () {
    ////  scope.$apply(function () {
    ////    scope.model = element.datepicker('getTime');
    ////  });
    ////});


    ////$scope.$watch('model', function (newValues, oldValues, scope) {
    ////  console.log("Nothing here");
    ////});       
  }
}
}]);



<input id="startTime" type="text" name="startTime" data-ng-model="vm.data.StartTime" time-picker  />

I am not able to validate time because of model is not updated. commented code is what I have tried to update value.

Any ideas on how to fix this?

Answer 1

This happens because the timepicker changing the value of the input field (probably using $("input").val("newval")) does not trigger any event that angular is listening on in order to start a digest cycle.

Sponateously, I can find an angular-jquery-timepicker that you might want to use. Looking at its source code, it seems like it is listening for a changeTime event:

element.on('changeTime', function () {
  $scope.$apply(function () {
    $scope.model = element.val();
  });
});

The changeTime event is also documented (see “Event Example”).

Try it out in this Plunkr. It turns out that listening for the change event also works.