Странное поведение в angular-daterangepicker

Я разрабатываю приложение Angularjs и использую угловая дата для заполнения дат в таблице.

При первой загрузке приложения startDate устанавливается на текущий день, а endDate - на 4 дня позже. Затем startDate, endDate и все даты между ними отображаются в таблице, которая выглядит следующим образом (и все это отлично работает):

Мои проблемы возникают, когда пользователь выбирает изменение диапазона дат (что также должно обновлять отображение таблицы) при применении нового диапазона дат в средстве выбора.

Если пользователь выбирает диапазон дат, который предшествует диапазону «по умолчанию», то в таблице отображаются только startDate и endDate, поэтому на этом изображении вы можете видеть, что я выбрал 2–6 июля, но только эти 2 даты являются отображается в таблице.

Если я вместо этого выберу диапазон дат, который находится после диапазона `` по умолчанию '', скажем, например, с 23 июля по 27 июля - тогда будут отображаться все даты из исходного диапазона по умолчанию до 27 июля (или, ну, за вычетом исходной startDate), поэтому он показывает с 17 по 27 июля.

Я хотел бы думать, что есть гораздо лучший способ перебрать даты между startDate и endDate, чем цикл for, который я использовал ... но я просто не мог ничего найти, так как весь материал, кажется, указывает только на начало и конец и игнорирует даты между ними.

Вы также можете увидеть, как ive переборщил с сбросом переменных / объектов на null / blank - но это, похоже, не имеет никакого значения.

Я использую Bootstrap 4.1, AngularJS 1.6.9, bootstrap-daterangepicker 3.0.3 и angular-daterangepicker 0.2.2

Любые предложения будут ценны,

Мой HTML-код:

<div data-ng-controller = "admRosController" data-ng-init = "initialTable()">    
<form data-ng-submit = "createRoster()" name = "rosterForm" method = "POST">
                <div class = "form-row">
                  <div class = "form-group col-md-4">
                    <label for = "daterange1" class = "control-label">Select Roster Dates:</label>
                    <div class = "input-group">
                      <div class = "input-group-prepend">
                        <div class = "input-group-text"><i class = "fa fa-calendar-check-o"></i></div>
                      </div>
                      <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">
                    </div>
                  </div>
                </div>
                <div class = "table-responsive">
                            <table class = "table table-striped table-hover" data-ng-model = "roster">
                                <thead class = "thead-dark">
                                    <tr>
                        <th class = "text-center">Date</th>
                                        <th class = "text-center">Shift 1</th>
                                        <th class = "text-center">Shift 2</th>
                                        <th class = "text-center">Sleep Over</th>
                                    </tr>
                                </thead>
                                <tbody>
                        <tr class = "text-center" data-ng-repeat = "x in rosCalJ track by $index">
                        <td>{{x.date | date:'EEE, MMMM dd, yyyy'}}</td>
                                        <td><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"></select></td>
                                        <td><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"></select></td>
                                        <td><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"></select></td>
                                    </tr>
                    </tbody>
                            </table>
                            <!--<button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#addModal">Add Staff</button>
                            <button type = "button" class = "btn btn-success" data-toggle = "modal" data-target = "#editModal">Edit Staff</button>
                            <button type = "button" class = "btn btn-secondary" data-toggle = "modal" data-target = "#deleteModal">Delete User</button>-->
                        </div>
                <div class = "form-group has-feedback">
                  <label for = "message">Roster Notes</label>
                  <textarea class = "form-control" rows = "3" id = "notes" name = "notes" data-ng-model = "rosData.notes" placeholder = ""></textarea>
                  <i class = "fa fa-pencil form-control-feedback"></i>
                </div>
                <label>Shift Times:</label>
                <p><strong>Shift 1</strong> 8:30am - 4:30pm (8 hrs)<br>
                  <strong>Shift 2</strong> 9:00am - 3:00pm (6 hrs)</p>
                <br>
                <button type = "submit" class = "btn btn-primary">Save Roster</button>
                <button type = "reset" value = "Reset" class = "btn btn-secondary">Clear</button>
              </form>

Мой угловой контроллер:

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 <= 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));
            };

    });

Обновлено: Вот код Plunker ... но проблема в том, что JQuery или Angular не работают ?? (извините, я новичок в использовании Plunker)
Angularjs daterangepicker на Plunker