Bootstrap DateTimePicker - on change event for Angular

Question

Given the demo below:

http://jsfiddle.net/ADukg/8851/

I want every time the date changes for my controller value to update. So every time a new date is selected from the box below the value for ng-model changes.

However upon using the following directive I get the error written above.

app.directive('datetimepicker', function () {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {

            element.datetimepicker({

                onRender:function (date) {

                    // Triggers a digest to update your model
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(date);
                    });

                }

            });
        }
    } 
});

How can I detect changes in Angular for the Datetimepicker?

Answer 1

Bootstrap's datetimepicker plugin doesn't support the change event in the options of the constructor, but you can use the dp.change event of the element you just added the datetimepicker to:

  element.datetimepicker({});
  element.on('dp.change', function(event) { 
    scope.$apply(function () {
      ngModelCtrl.$setViewValue(event.date.format());
    });
  })

Here is the update to your jsfiddle:
http://jsfiddle.net/dekelb/fc9kuy3x/3/