How to detect bootstrap datetimepicker change events within angularJS

Question

I am using this datetime picker in angular.

https://eonasdan.github.io/bootstrap-datetimepicker/

Inside of a controller I have:

$('#picker').datetimepicker();

In my HTML I have:

    <div id="#picker" >
        <input type='text' style="font-size:10pt;" class="rptv-input" placeholder="Start Time" ng-model='adate' ng-change="datechange()" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>       

Everything is managed by a controller "AppController". The problem is, when I select a date on the calendar by click, it does not trigger any "change" event (in other words, datechange is not fired). If I do a watch on ng-model "adate", it also does not seem to trigger it. If I type in the text box, then the scope variable changes.

How can I detect changes on the text box if the user clicks on a date in the selector to change it?

Answer 1

Here's the jist of the logic, but basically you need to make a directive that in turn creates the datetimepicker itself. Then within boostraps change() function you must do a $apply() which triggers a digest cycle and updates your model.

boostrap 3 datetimepicker event documentation

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

            element.datetimepicker({
                change:function (date) {

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

                }
            });
        }
    } 
});

Useage :

<input datetimepicker ng-model="adate" />