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

Question

My callback below cannot update / access the variables of the variable $ my (or the changes are not displayed for any reason), how can I achieve this? The callback is being called, but I think something is clearly out of line with my javascript scope 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); } 

Answer 1

As suggested by @charletfi, you need to wrap callbacks from outside Angular in $apply to tell Angular to start a digest loop to determine the changes.

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