title: Daterangepicker change angularjs
body: <p>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.</p>
  
  <p>My problem is with the listener.. I need something like "onChange" when i set new dates.</p>
  
  <p>View:</p>
  
  <pre><code>&lt;div class="form-group col-md-3 mb0" ng-if="timerange == 'custom'"&gt;
                          &lt;div class="row"&gt;
                              &lt;label class="col-sm-3 control-label pt7"&gt;Custom&lt;/label&gt;
                              &lt;div class="col-sm-9"&gt;
                                  &lt;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}}'}" /&gt;                                
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>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 += '&amp;startDate='+startDate;
  }
  if (endDate !== undefined) {
      url += '&amp;endDate='+endDate;
  </code></pre>
  
  <p>}</p>
  
  <p>i tried 2 optiuons but i cant get into that code when i put a breakpoint on it..</p>
  
  <pre><code>$scope.$watch("customrange", function() {
    console.log("I've changed : ");
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>rangeSelector.addEventListener("change", function(e){
      if(rangeSelector.value == "custom"){
          e.preventDefault();
          customrange = document.getElementById("customrange");
          customrange.addEventListener("change", function(){
               startEndDate = controllerScope.getStartEndTimestamps();
          });
        }
  }, false);
  </code></pre>
  
  <p>Anyone can help me please??</p>
  
  <p><a href="https://i.stack.imgur.com/H9YY0.png" rel="nofollow noreferrer">Image of problem</a></p>