Angularjs 未通过服务从其他控制器更新值

我有一个菜单控制器和每个视图控制器。我想要实现的是将

active

类添加到菜单项中，以便可以直观地选择活动菜单项。为了让这个工作，我创建了一个servide来存储当前的菜单项（编号）。这是我的看法

body
    div.menu(ng-controller="menuCtrl")
        ul
            li(ng-class="{selected: menuItem===0}")
                a(href='#/')
                    i.material-icons.medium visibility

            li(ng-class="{selected: menuItem===1}")
                a(href='#/posts')
                    i.material-icons.medium library_books

            li(ng-class="{selected: menuItem===2}")
                a(href='#/categories')
                    i.material-icons.medium loyalty
        span test {{menuItem}} // test menuItem variable


    div.row-fluid
        ng-view

这是

menuCtrl

controller

app.controller('menuCtrl', ['$scope', '$http', 'global', '$interval', function($scope, $http, GLOBAL, $interval ) {
    $scope.menuItem = GLOBAL.menuItem;
}])

如您所见，我将变量从服务绑定到本地

$scope

变量

这是我的服务

app.factory( 'global', function( $http ) {
    return {
        menuItem: 0,
    }
})

然后在每个视图控制器中，我添加一行，将特定值分配到服务的

菜单项中，如下所示：

app.controller('postsCtrl', ['$scope', '$http', 'global', '$location', function($scope, $http, GLOBAL, $location ) {
    // ...
    GLOBAL.menuItem = 1;
    // ...
}])

所有其他视图控制器也是如此，因此
menuItem
为2,3,4等

问题是，即使单击多个菜单项时，
menuItem
变量似乎发生了变化，菜单下的值（我放置测试注释的地方）仍然是0，结果是，只有第一个菜单项具有
活动的
类

为什么？
您应该使用not控制器来管理这类事情

这是一个“被选择”指令使生命变得简单，在中间没有任何控制器的状态下进入状态服务。
  <ul>
    <li is-selected="1">Menu 1</li>
    <li is-selected="2">Menu 2</li>
    <li is-selected="3">Menu 3</li>
    <li is-selected="4">Menu 4</li>
  </ul>

这并不能回答您的问题，但我鼓励您使用一些现有的解决方案，例如。
myApp.directive('isSelected', ['myService', function(myService) {
  return {
    scope: {},
    link: function(scope, el, attrs) {
      var id = parseInt(attrs.isSelected, 10),           
      unwatch = scope.$watch(
        function() {
          return myService.menu.selected;
        },
        function(val) {       
          if (val == id)
            el.addClass("menuItemSelected")
          else
            el.removeClass("menuItemSelected")
        }),
        dst = scope.$on("$destroy", function() {    
        angular.element(el).off("click");
        unwatch();
        dst();           
      });
      angular.element(el).on("click",function() {
        scope.$apply(function() {myService.menu.selected = id;});       
      });   
    }
  }
}]);