Daterangepicker change angularjs

Question

I have a date range picker and I need to add a listener everytime i change the range of the values so i sent the startDate and endDate in my url to a restapi and then make a query to my databse with that valeus and get new rows.

My problem is with the listener.. I need something like "onChange" when i set new dates.

View:

<div class="form-group col-md-3 mb0" ng-if="timerange == 'custom'">
                        <div class="row">
                            <label class="col-sm-3 control-label pt7">Custom</label>
                            <div class="col-sm-9">
                                <input type="text" id="customrange" name="customrange" ng-model="parent.customrange" ng-change="applyOptions()" class="form-control" ui-jq="daterangepicker" ui-options="{format: 'YYYY/MM/DD',startDate: '{{startdate}}',endDate: '{{enddate}}', maxDate:'{{enddate}}'}" />                                
                            </div>
                        </div>
                    </div>

Controller:

var rangeSelector = document.getElementsByTagName('select')[1]; //1h 24h 1w custom
if(rangeSelector.value == 'custom'){
    var datePicker = document.getElementById("customrange").getAttribute('ui-options');

    var split = datePicker.split(",");  

 var startDate = split[1].split(': ')[1].replace(/["']/g, '');
   var endDate = split[2].split(': ')[1].replace(/["']/g, '');

if (startDate !== undefined) {
    url += '&startDate='+startDate;
}
if (endDate !== undefined) {
    url += '&endDate='+endDate;

}

i tried 2 optiuons but i cant get into that code when i put a breakpoint on it..

$scope.$watch("customrange", function() {
  console.log("I've changed : ");
});

and

rangeSelector.addEventListener("change", function(e){
    if(rangeSelector.value == "custom"){
        e.preventDefault();
        customrange = document.getElementById("customrange");
        customrange.addEventListener("change", function(){
             startEndDate = controllerScope.getStartEndTimestamps();
        });
      }
}, false);

Anyone can help me please??

Image of problem

Answer 1

Updated:

The problem is that your $watch is not checking the correct model.

Your $watch should be called as follows:

$scope.$watch("parent.customrange", function(newValue, oldValue) {
 console.log("I've changed : ");
});

To watch the object "parent":

$scope.$watch("parent", function(newValue, oldValue) {
  console.log("I've changed : ");
}, true);

The true sets the optional objectEquality check.

Angular $watch Documentation :

When objectEquality == true, inequality of the watchExpression is determined according to the angular.equals function. To save the value of the object for later comparison, the angular.copy function is used. This therefore means that watching complex objects will have adverse memory and performance implications.