How to access my angular $scope inside my custom callback?

angularjs, scope

Solution

As @charletfi suggested, you need to wrap callbacks from outside Angular in an `$apply` to instruct Angular to run a digest cycle to determine changes.

// Should now work
this.updateAnalyticsInitStatus = function (status) {
    $scope.$apply(function () {
        console.log('boom; ' + status);
        $scope.analyticsInitStatus = status;
    });
};

Problem

My callback's below are not able to update/access my $scope variables (or, the changes aren't showing for some reason), how can I achieve this? The callback's are being called, but I think something clearly isn't right with my javascript scoping here. ``` function ReportsCtrl($scope) { var self = this; $scope.analyticsIsReady = false; $scope.analyticsInitStatus = ''; //$scope.originCompositionChart = new Chart__('originCompositionChart', reportsClient.getOriginCompositionData, true, false); $scope.originCompositionChart = new Chart__('originCompositionChart', null, true, false); $scope.charts = new Array($scope.originCompositionChart); $scope.showIncludedCharts = function () { }; //todo not working this.updateAnalyticsInitStatus = function (status) { console.log('boom; ' + status); $scope.analyticsInitStatus = status; }; //todo not working this.handleAnalyticsInitSuccess = function (status) { $scope.analyticsInitStatus = 'Initialisation complete'; $scope.analyticsIsReady = true; }; window.analyticsInitialiserClient = new AnalyticsInitialiserClient__(this.updateAnalyticsInitStatus, this.handleAnalyticsInitSuccess); } ```

Original source