AngularJS: как обновить $scope после изменения в директиве?

Question

FujiKura @FujiKura

AngularJS: как обновить $scope после изменения в директиве?

Здравствуйте.

Подскажите, пожалуйста, как обновить данные в $scope после их изменения внутри директивы.

Есть контроллер в котором инициализируются данные из базы и отображаются в представлении:

$scope.info = {
                users: info.users,
                wells: info.wells,
                revises: info.revises
            };

Есть директива, отслеживающая изменение дат в фильтре для запроса:

.directive('daterangepicker', function($http) {
        return {
            restrict: 'A',
            scope: {
                options: '=daterangepicker',
                start: '=dateBegin',
                end: '=dateEnd'
            },
            link: function(scope, element, $scope, $rootScope) {
                element.daterangepicker(scope.options, function(start, end) {
                    scope.start = start.format('D MMMM, YYYY');
                    scope.end = end.format('D MMMM, YYYY');
                    scope.$apply();
                })
                element.on('apply.daterangepicker', function(event, picker) {
                    console.log(picker.startDate.format('YYYY-MM-DD') + ' по ' + picker.endDate.format('YYYY-MM-DD'));
                    var start = picker.startDate.format('YYYY-MM-DD');
                    var end = picker.endDate.format('YYYY-MM-DD');

                    var vm = this;
                    vm.error;

                    $http.get('/api/v1/dashboard/'+start + '/' + end).success(function(info){

                        $scope.info = {
                            users: info.users,
                            wells: info.wells,
                            revises: info.revises,
                            flag: 1
                        };
                        console.log($scope.info);
                        vm.info = info;
                    }).error(function(error){
                        vm.error = error;
                    })

                });
            }
        };
    });

Соответственно в консоли данные обновляются корректно:

Инициализация: {users: 6, wells: 3, revises: 793}
Диапазон дат: 2017-12-01 по 2017-12-31
Новые данные: {users: 6, wells: 601, revises: 0, flag: 1}

Я не могу понять как теперь обновить эти данные в представлении. Пробовал так:

element.on('apply.daterangepicker', function(event, picker) {
                    $scope.$apply(function() {
                        console.log(picker.startDate.format('YYYY-MM-DD') + ' по ' + picker.endDate.format('YYYY-MM-DD'));
                        var start = picker.startDate.format('YYYY-MM-DD');
                        var end = picker.endDate.format('YYYY-MM-DD');

                        var vm = this;
                        vm.error;

                        $http.get('/api/v1/dashboard/'+start + '/' + end).success(function(info){

                            $scope.info = {
                                users: info.users,
                                wells: info.wells,
                                revises: info.revises,
                                flag: 1
                            };
                            console.log($scope.info);
                            vm.info = info;
                        }).error(function(error){
                            vm.error = error;
                        })
                    });
                });

И в других вариациях, но все время возникает ошибка: Uncaught TypeError: $scope.$apply is not a function