angularjs - Changes to service bound to controller scope not visible -

i have service hold data (in associative array) that's important multiple controllers. data service holds updated asynchronously. in controller make variable on scope myservice , assign service. then, in view, reference data myservice.theinterestingdata . in case important, in view, referencing interestingdata assoc array in ng-repeat.

for reason, when data updated (i console logs), visible page not change, if perform ui action (for example open snap-drawer http://jtrussell.github.io/angular-snap.js/), data updated, further changes require ui action before they're visible.

i must doing wrong. suggestion how can fix this? thought perhaps need $apply called, data on service has no reference controller on scope i'd need $apply

see these 2 versions of fiddle. both show same logging, 1 (not surprisingly 1 uses $interval http://jsfiddle.net/a6nhs/5/ ) updates "screen" (what talking here? dom?) , other (window.setinterval http://jsfiddle.net/a6nhs/4/ ) not. in actual app not interval causes asynchronous update, receiving information on websocket, , solution me not easy changing $interval.

html:

<div ng-controller="myctrl">   hello, {{name}}!     {{numsservice}}     <li ng-repeat="(key,val) in numsservice.nums">         {{key}} | {{val}}     </li> </div> 

and js:

var myapp = angular.module('myapp',[]);  //myapp.directive('mydirective', function() {}); myapp.service('myservice', function() {     this.nums={};     this.total = 0; });  myapp.service('differentservice', function(myservice, $interval){     $interval(function(){ //using $interval works, using window.setinterval not         console.log('diffservice');         myservice.nums[myservice.total+'idx']=myservice.total++;         console.log(myservice.nums);     }, 1000); });  function myctrl($scope, myservice, differentservice) {     $scope.name = 'superhero';     $scope.numsservice = myservice; } 

you try $apply on $rootscope:

myapp.service('differentservice', function(myservice, $rootscope){      window.setinterval(function(){         $rootscope.$apply(function(){             console.log('diffservice');             myservice.nums[myservice.total+'idx']=myservice.total++;             console.log(myservice.nums);         });     }, 1000);   }); 

normally, when call $apply(exp) on scope, evaluates exp , calls $digest() on root scope. take @ angularjs service rootscope

updated fiddle