AngularJS更新连接或断开Firebase时的服务值

HTML

<button class="button button-icon ion-cloud" ng-style="dbConnectedStyle"></button>

调节器

firebaseRef.$loaded().then( function() {
  $scope.dbConnectedStyle = {'color': dbConnectStatus.color};
}

服务

.service('dbConnectStatus',function(firebaseRef){
  var status = false;
  var color = 'transparent';
  var connectedRef = firebaseRef.child(".info/connected");
  connectedRef.on("value",function(snap) {
    status = snap.val();
    if (status) {
      color = 'lightgrey';
      console.log("Connected to DB (" + color + ")" );
    } else {
      color = 'transparent';
      console.log("Disonnected to DB (" + color + ")" );
    }
  });
  return {
    'boolean': status,'color': color
  }
})

它第一次改变颜色.但是当断开连接时它不会改变…似乎不是双向绑定服务.我该如何实现？

UPDATE

试图做一个对服务的引用作为一个对象,而不是按照好的教程A Tale of Frankenstein and Binding to Service Values in Angular.js中的原理进行原语分配

我将代码更改为以下内容

HTML

<button class="button button-icon ion-cloud" 
        ng-style="dbConnectionStatus.connectionStyle">
        </button>

服务

.service('dbConnectStatus',function(firebaseRef,$rootScope){
  this.status = false;
  var styles = {
    'offlineStyle': {'color': 'red'},'onlineStyle': {'color': 'lightgrey'}
  };
  this.connectionStyle = styles.offlineStyle;

  firebaseRef.child(".info/connected")
    .on("value",function(snap) {
        this.status = snap.val();
        if (snap.val()) {
          console.log("Connected to DB.");
          this.connectionStyle = styles.onlineStyle;
          console.log(this.connectionStyle);
        } else {
          console.log("Disconnected to DB.");
          this.connectionStyle = styles.offlineStyle;
          console.log(this.connectionStyle);
        }
        console.log(this.status);
        $rootScope.$broadcast('dbConnection:changed');            
      }
    );

})

调节器

$scope.dbConnectionStatus = dbConnectStatus;
      $scope.$on('dbConnection:changed',function() {
        console.log("'on(...)' called. This is the $scope.dbConnectionStatus.connectionStyle:");
        $scope.dbConnectionStatus = dbConnectStatus;
        console.log($scope.dbConnectionStatus.connectionStyle);
        console.log("This is the dbConnectStatus.connectionStyle:");
        console.log(dbConnectStatus.connectionStyle);
      });
      $rootScope.$watch('dbConnectStatus',function (){
        $scope.dbConnectionStatus = dbConnectStatus;
      });
      //$rootScope.$apply();

然后我重新加载代码并得到这个控制台消息

然后我关闭了连接

然后我打开连接

很明显,服务dbConnectionStatus没有按照我的预期方式更新为全局变量.我假设一个服务在应用程序加载时被调用一次,并且将一个作用域变量分配给一个服务(对象)不是一个调用,而是一个引用…

我究竟做错了什么？