javascript - How to update angular scope

Question

i want to make some changes in my controller of the data i get from the server. I made an example of these to explain my problem. The recursive method "update" seems not to update the value of the $scope.gdevPiechartArchiveVolume. Could someone tell me why? Is there a way to trigger the update? Thank you!

angular.module('socketTestApp')
    .controller('MainCtrl', function($scope, Socket) {

        Socket.on('gdevAreachart_archiveVolume_update', function(data_) {
            selectArchiveData(data_);
        });
        function selectArchiveData(data) {

            var i = 0;
            var selectedData;


            $scope.update = function() {
                _.delay($scope.update, 2000);

                if ($scope.pause)
                    return

                i++
                $scope.gdevPiechartArchiveVolume = i;   //<--- this seems not to work but only if i set $scope.pause true
                console.log('Updates in $scope.update: ' + $scope.gdevPiechartArchiveVolume);
            }


            $scope.update();

        }

My direcitve (the watched variable data is "$scope.gdevPiechartArchiveVolume"):

angular.module('socketTestApp')
    .directive('gdevAreachart', function() {
        var linker = function(scope, element, attr) {

            scope.$watch('data', function(newVals, oldVals) {
                console.log("Direktive: " + newVals);
                return //make some other thinks
            }, true);

Console output (the "Direktive:..." should be printed every time like "Updates in $scope.update:"):

Direktive: undefined gdevAreachart.js:14
Updates in $scope.update: 1 main.js:127
Direktive: 1 gdevAreachart.js:14          <---- set scope.pause = true ... false to continue
Updates in $scope.update: 2 main.js:127
Updates in $scope.update: 3 main.js:127
Updates in $scope.update: 4 main.js:127
Updates in $scope.update: 5 main.js:127
Updates in $scope.update: 6 main.js:127
Direktive: 6 gdevAreachart.js:14          <---- set scope.pause = true ... false to continue
Updates in $scope.update: 7 main.js:127
Updates in $scope.update: 8 main.js:127
Direktive: 8 gdevAreachart.js:14          <---- set scope.pause = true ... false to continue
Updates in $scope.update: 9 main.js:127
Updates in $scope.update: 10 main.js:127
Direktive: 10 gdevAreachart.js:14          <---- set scope.pause = true ... false to continue
Updates in $scope.update: 11 main.js:127
Updates in $scope.update: 12 

Solution:

function selectArchiveData(data) {

            var i = 0;
            var selectedData;


            $scope.update = function() {


                if ($scope.pause)
                    return

                i++
                $scope.gdevPiechartArchiveVolume = i;
                console.log('Updates in $scope.update: ' + $scope.gdevPiechartArchiveVolume);
                setTimeout(function() {
                   $scope.$apply($scope.update());
                }, 2000);
            }
            $scope.update();

        }

Answer 1

Have you tried using $scope.$apply() ? You need to do that every time you want to update the angular $scope from a function that angular "doesn't care about", in your case Socket.on