bootstrap-datepicker does not update AngularJS model when picking date

Question

I am using AngularJS with this bootstrap-datepicker plugin:

Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)

Copyright 2012 Stefan Petre

Improvements by Andrew Rowls

I have it bound like this:

<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />

I get the values to inputs using ng-model.

When I type the date into this field using keyboard it all works OK, but when I click on a field and select a date from the Datepicker:

• the model doesn't get updated,
• the field is not treated as dirty (no ng-dirty class).

Is there a way to tell Angular to update value of obj.FirstDate when using the Datepicker? For example to attach it to an event? Or any other way that this would work?

I have a few of these fields so I don't want to write the script which attaches to a field using its id. Any help appreciated.

Answer 1

After much time of struggling with this I was forced to use below code to fix every of my datepicker instances at once:

function fixDatepickerTriggerChange() {
    $(document).ready(function () {
        $('[data-provide="datepicker"]').datepicker().on('changeDate', function (e) {
            angular.element($(this)).triggerHandler('input');
        });
    });
}

And run it from within the angular.controller.

Based on this answer: https://stackoverflow.com/a/23850753/1813219.