Переменная $scope не обновляется до второго щелчка (AngularJS / jQuery / Bootstrap Date Range Picker)

Question

Так что я уже немного искал на стеке поток, и кажется, что проблемы похожи на мои, но разные. Для меня представление (div class с id="reportrange") обновляется сразу, чтобы показать дату, выбранную, когда пользователь выбирает желаемый диапазон дат, но переменную $scope (используется, чтобы я мог передать выбранные начало и конец значения даты в фильтр) не обновляется до тех пор, пока пользователь не нажмет на область отчета div во второй раз.

Я использую средство выбора диапазона начальной загрузки с AngularJS.

Вот код в моем контроллере:

//start date when page loads
$scope.startDate = moment().subtract(3, 'years').startOf('year').format('YYYY-MM-DD');    
//end date when page loads
$scope.endDate = moment().add(2, 'years').endOf('year').format('YYYY-MM-DD');  

//updates the startDate and endDate
var updateStartEnd = function (start, end) {
    $scope.startDate = start.format('YYYY-MM-DD');
    $scope.endDate = end.format('YYYY-MM-DD');
    //$log.info($scope.startDate);
    //outputs the correct date but date not changed on the page
    //$log.info($scope.endDate);
    //outputs the correct date but date not changed on the page
}

$scope.dateFunc = function () {

    function cb(start, end) {
        updateStartEnd(start, end);
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({

        ranges: {
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
           'This Year': [moment().startOf('year'), moment().endOf('year')]
        }

    }, cb);
};

и это раскрывающийся список выбора даты на моей HTML-странице:

<div ng-click="dateFunc()" id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
<span>Select a Date Range...</span> <b class="caret"></b>
</div>

Я попытался добавить $scope.watch, а также изменить ng-click на ng-init, но ни один из них не оказался полезным. Любая помощь с благодарностью.

Answer 1

Я исправил проблему, добавив $scope.$ Apply, как показано ниже:

//updates the startDate and endDate
var updateStartEnd = function (start, end) {
    $scope.$apply(function () {
        $scope.startDate = start.format('YYYY-MM-DD');
        $scope.endDate = end.format('YYYY-MM-DD');       
    });
};