AngularJS: how to update $scope after change in directive?

Question

JavaScript

Hello.
Please tell me how to update the data in $scope after changing it inside the directive.
There is a controller in which the data from the database is initialized and displayed in the view:

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

There is a directive that tracks the change of dates in the filter for the request:

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

                });
            }
        };
    });

Accordingly, the data is updated correctly in the console:

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

I can't figure out how to update this data in the view now. Tried like this:

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

And in other variations, but the error always occurs: Uncaught TypeError: $scope.$apply is not a function

Answer 1

use bidirectional data binding in the template
https://metanit.com/web/angular2/2.5.php