title: Strange behaviour in angular-daterangepicker
body: <p>I'm developing an Angularjs app, and using the <a href="https://github.com/fragaria/angular-daterangepicker" rel="nofollow noreferrer">angular-daterangepicker</a> to fill in dates on a table.</p>
  
  <p>When the App first loads, the startDate is set to the current day &amp; the endDate for 4 days later.  Then the startDate, endDate and all the dates between are displayed in a table which looks like this (and this all works fine):
  <a href="https://i.stack.imgur.com/PLjZa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PLjZa.jpg" alt="enter image description here"></a></p>
  
  <p>My problems arise when a user selects to change the date range (which should also refresh the table display) on applying the new date range in the picker.</p>
  
  <p>If a user selects a date range which is before the 'default' range, then only the startDate and endDate get displayed in the table - so in this image, you can see i selected July 2nd to July 6th, but only these 2 dates are displayed in the table.
  <a href="https://i.stack.imgur.com/R4C5J.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R4C5J.jpg" alt="enter image description here"></a></p>
  
  <p>If i then instead select a date range which is after the 'default' range, say for example July 23 to July 27 - then all dates from the original default range thru to July 27 get displayed (or well minus the original startDate), so it displays July 17 thru to July 27.
  <a href="https://i.stack.imgur.com/57lCy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/57lCy.jpg" alt="enter image description here"></a></p>
  
  <p>I would like to think there's a much better way to iterate thru the dates between the startDate &amp; endDate, rather than the for-loop I used... but i just couldn't find anything, as all material only seems to point to the start &amp; end &amp; ignores the dates between these.</p>
  
  <p>You can also see ive gone overboard with resetting variables/objects to null/blank - but this doesn't seem to make any difference.</p>
  
  <p>Im using Bootstrap 4.1, AngularJS 1.6.9, bootstrap-daterangepicker 3.0.3 &amp; angular-daterangepicker 0.2.2</p>
  
  <p>Any suggestions would be greatly appreciated,</p>
  
  <p>My HTML code:</p>
  
  <pre><code>&lt;div data-ng-controller="admRosController" data-ng-init="initialTable()"&gt;    
  &lt;form data-ng-submit="createRoster()" name="rosterForm" method="POST"&gt;
                  &lt;div class="form-row"&gt;
                    &lt;div class="form-group col-md-4"&gt;
                      &lt;label for="daterange1" class="control-label"&gt;Select Roster Dates:&lt;/label&gt;
                      &lt;div class="input-group"&gt;
                        &lt;div class="input-group-prepend"&gt;
                          &lt;div class="input-group-text"&gt;&lt;i class="fa fa-calendar-check-o"&gt;&lt;/i&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;input date-range-picker type="text" class="form-control form-control-sm date-picker" id="daterange1" name="daterange1" data-ng-model="rosData.date" options="dateRangeOptions"&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="table-responsive"&gt;
                              &lt;table class="table table-striped table-hover" data-ng-model="roster"&gt;
                                  &lt;thead class="thead-dark"&gt;
                                      &lt;tr&gt;
                          &lt;th class="text-center"&gt;Date&lt;/th&gt;
                                          &lt;th class="text-center"&gt;Shift 1&lt;/th&gt;
                                          &lt;th class="text-center"&gt;Shift 2&lt;/th&gt;
                                          &lt;th class="text-center"&gt;Sleep Over&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
                          &lt;tr class="text-center" data-ng-repeat="x in rosCalJ track by $index"&gt;
                          &lt;td&gt;{{x.date | date:'EEE, MMMM dd, yyyy'}}&lt;/td&gt;
                                          &lt;td&gt;&lt;select class="form-control form-control-sm" data-ng-model="rosData.shift1[$index]" data-ng-options="x.id as x.name for x in obj"&gt;&lt;/select&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;select class="form-control form-control-sm" data-ng-model="rosData.shift2[$index]" data-ng-options="x.id as x.name for x in obj"&gt;&lt;/select&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;select class="form-control form-control-sm" data-ng-model="rosData.sleep[$index]" data-ng-options="x.id as x.name for x in obj"&gt;&lt;/select&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                              &lt;/table&gt;
                              &lt;!--&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal"&gt;Add Staff&lt;/button&gt;
                              &lt;button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal"&gt;Edit Staff&lt;/button&gt;
                              &lt;button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#deleteModal"&gt;Delete User&lt;/button&gt;--&gt;
                          &lt;/div&gt;
                  &lt;div class="form-group has-feedback"&gt;
                    &lt;label for="message"&gt;Roster Notes&lt;/label&gt;
                    &lt;textarea class="form-control" rows="3" id="notes" name="notes" data-ng-model="rosData.notes" placeholder=""&gt;&lt;/textarea&gt;
                    &lt;i class="fa fa-pencil form-control-feedback"&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;label&gt;Shift Times:&lt;/label&gt;
                  &lt;p&gt;&lt;strong&gt;Shift 1&lt;/strong&gt; 8:30am - 4:30pm (8 hrs)&lt;br&gt;
                    &lt;strong&gt;Shift 2&lt;/strong&gt; 9:00am - 3:00pm (6 hrs)&lt;/p&gt;
                  &lt;br&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;Save Roster&lt;/button&gt;
                  &lt;button type="reset" value="Reset" class="btn btn-secondary"&gt;Clear&lt;/button&gt;
                &lt;/form&gt;
  </code></pre>
  
  <p>My Angular Controller:</p>
  
  <pre><code>var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'daterangepicker'])
  
  app.controller ("admRosController", function ($scope, $http, $location) {
          var startingDate = null;
          var endingDate = null;
          $scope.rosCal = [];
          $scope.rosData = [];
  
          loadingDate = function() {
              $scope.rosData.date = {
          startDate: moment(),
          endDate: moment().add(4, "days")
              };
          };
  
          $scope.initialTable = function() {
              loadingDate();
              startingDate = $scope.rosData.date.startDate;
              endingDate = $scope.rosData.date.endDate;
              $scope.displayTable();
          };
  
          $scope.dateRangeOptions = {
          locale : {
              format: 'MMMM D, YYYY'
          },
          eventHandlers : {
              'apply.daterangepicker' : function() {
                  $scope.rosCal = null;  //clear the array
                                  $scope.rosCalJ = null;
                                  $scope.rosCal = [];
                                  $scope.rosCalJ = [];
                                  startingDate = null;
                                  endingDate = null;
                                  startingDate = $scope.rosData.date.startDate;
                                  endingDate = $scope.rosData.date.endDate;
                                  $scope.displayTable();
                          }
          }
      };
  
          $scope.displayTable = function() {
              var i = 0;
              var thisdates = null;
              //$scope.rosCal = [];
              //$scope.rosCalJ = [];
              $scope.obj = [];
              $http.get('php/rosstaff.php')
                  .then(
                      function (response) {
                          $scope.obj = response.data;
                      },
                      function (response) {
                          // error handling routine
                      }
                  );
  
                  for (thisdates = startingDate; thisdates &lt;= endingDate; thisdates = moment().add(i, "days"))
                  {
                      $scope.rosCal.push({date: thisdates});
                      i++;
                  }
                  $scope.rosCal.push({date: endingDate})
                  $scope.rosCalJ = JSON.parse(JSON.stringify($scope.rosCal));
              };
  
      });
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  Here's the code on Plunker... but there's an issue with it that either Jquery or Angular aren't working?? (sorry, im new to using Plunker)<br>
  <a href="https://plnkr.co/edit/5wP4Yvzofc0aYte9KP75?p=preview" rel="nofollow noreferrer">Angularjs daterangepicker on Plunker</a></p>