AngularJS not updating template variable when scope changes

angularjs, angularjs-scope, angularjs-service, javascript

Solution

You probably need to use `$apply()`:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

function listener(data) {
   $scope.$apply(function() {
       Service.dataObj.d = data;
   });
}

Problem

This will be one of those stupid questions that is very obvious to the experts. I have a websocket pushing data to a service where I'm trying to store the data and have it pushed to a template via my controller. The data is coming in and updating the variable but the UI only updates is I perform a action on that data: ``` services.factory('Summary', ['$q','$rootScope','$http', '$location', function ($q, $rootScope,$http, $location) { var Service = {}; Service.dataObj = {}; Service.dataObj.d = {"gello":"goodbye"}; .... function listener(data) { messageObj = data; Service.dataObj.d = data; console.log("Received data from websocket: ", messageObj); } })]); controllers.controller('UserCtrl', ['$scope', 'Summary', function ($scope, Summary) { $scope.click = function(){ alert(JSON.stringify($scope.summaryinfo)); } $scope.summaryinfo = [Summary.dataObj]; $scope.summarygridOptions = { data: 'summaryinfo' }; console.log("hello"); }]); ``` The data gets pumped in and as far as I was aware because its being stored in Service.dataObj.d if I point my HTML template at Service.dataObj that object is being updated and not replaced so the pointer should remain and the object be watched. But it doesn't change unless I run the click() method, in which case the UI is affected even though Im just triggering an alert. What am I missing?

Original source