angular-daterangepicker: how to read updated model

Question

I'm using the module "angular-daterangepicker" (from here ) that has to be bound to a scope-model. When I do this, it initializes correctly. But on updates, this model does not change at all:

HTML:

<input date-range-picker type="text" ng-model="dateRange" 
 options="dateRangeOpts" />

Javascript:

$scope.dateRange = {
  startDate: '2015-03-01',
  endDate: '2015-03-05'
};
$scope.dateRangeOpts = {
  format: 'YYYY-MM-DD'
};

// watch: Not working
$scope.$watch('dateRange', function(newDate) {
  console.log('New date set: ', JSON.stringify(newDate));
}, false);

When changing the dateRange directly, $watch is called. When using the daterangepicker, nothing happens.

Since the watch mechanism is taken from the example and the angular-wrapper seems to be active, I assume I'm doing something wrong. How do I get the updated model?

As a workaround, I'm reading the input-value using JQuery and ng-change .

Answer 1

You need to use following code on change function of datapicker

$scope.$apply(
     function(){
        $scope.varible = date;
    }
);

Answer 2

I encountered the same issue. It works in my hands only if I use a dict for the dates. This works:

    $scope.daterangepicker = {
        dates : { startDate: null, endDate: null } 
        };
    $scope.$watch("daterangepicker.dates", function(newDates, oldDates) {
        console.log("New date set: ", newDates);
    }, false);