javascript - When using Angular with SignalR, how do I notify a controller when a change is made to an object in a service? -

i have reasonably simple angular app 4 controllers , 2 services. 1 service stores data , shares around other controllers, this:

var dataservice = function($http) {     this.testdata = []; }     myapp.service('dataservice', ["$http", dataservice]); 

and other service contains client-side signalr methods, this:

var hubservice = function(dataservice) {         this.testhub = $.connection.testhub;     this.connectionstatus = [];      this.connecttohub = function(callback) {         var self = this;         $.connection.hub.start().done(function() {             self.connectionstatus.push(1);             if (callback) {                 callback();             }         });     };        this.getsomedata = function (node, callback) {                 this.testhub.server.getsomedata(node).done(function (response) {                         if (callback) { callback(); }                  });     };        this.testhub.client.adddata = function(serverdata) {         dataservice.testdata.push(serverdata)        };   }  myapp.service('hubservice', ["dataservice", hubservice]); 

where server-side hub method

public class testhub : hub {      public void getsomedata(node node) {         var data = _queries.getsomedatafromaserver();         clients.all.adddata(data);      } } 

now works fine, inject dataservice , hubservice controllers , can call hubservice.getsomedata() method , calls server-side method , in turn calls client-side signalr method , dataservice.testdata object updated.

the problem controllers not notified of change until next $digest cycle, sort of ui event. need controllers notified immediately. know can call $scope.$apply() manually trigger $digest cycle, service method being called directly server-side method there's no way use $scope.

what do? how can make angular watch service object changes service, or how can trigger $digest cycle across controllers service-method?

it might not answer mechanism how achieve it.

var app = angular.module('plunker', []);  app.service('myservice', function($rootscope) {   var data = 0;   var id = 0;    var increment = function() {     data = data + 1;     $rootscope.$apply();     console.log("incrementing data", data);   };    this.start = function() {     id = setinterval(increment, 500) ;    };    this.stop = function() {     clearinterval(id);   };    this.getdata = function() { return data; };  }).controller('mainctrl', function($scope, myservice) {   $scope.service = myservice;   $scope.controllerdata = 0;    $scope.start = function() {     myservice.start();   };    $scope.stop = function() {     myservice.stop();   };    $scope.$watch('service.getdata()', function(newval) {      console.log("new data", newval);     $scope.controllerdata = newval;   }); });