AngularJS-当指令更改服务中的数据时，视图未更新

我使用指令与服务交互，但在显示最新数据的视图中遇到了一些问题

我设置了以下示例。您可以看到，当控制器与服务交互时，视图将使用最新数据进行更新。如果单击指令链接，可以在控制台中看到数据已更改，但视图未使用该数据更新

我错过了什么

JavaScript：

var app = angular.module('myApp', []);

app.factory('Service', function() {
  var Service = {};
  Service.data = {};
  Service.data.active = false;
  Service.data.one = {};
  Service.data.many = [];
  Service.changeActive = function(state) {
    state = state || false;
    Service.data.active = state;
  };
  Service.setOne = function(one) {
    Service.data.one = one;
  };
  Service.setMany = function(many) {
    Service.data.many = many;
  };
  return Service;
});

app.directive('launcher', function(Service) {
  return {
    restrict: "A",
    link: function(scope, elem, attrs) {
      elem.bind('click', function(event) {
        if (Service.data.active) {
          Service.changeActive(false);
        } else {
          Service.changeActive(true);
        }
        console.log(Service.data); // shows data changed
      });
    }
  };
});

function Ctrl1($scope, Service) {
  $scope.ServiceData = Service.data;
}

function Ctrl2($scope, Service) {
  $scope.active = function() {
    Service.changeActive(true);
  };
  $scope.inactive = function() {
    Service.changeActive(false);
  };
}

HTML

<div ng-controller="Ctrl1">
  {{ServiceData}}
</div>

<hr />

<div ng-controller="Ctrl2">
  Directive: <a href="#" launcher>Change</a>
  <hr /> Controller:

  <button ng-click="active()">
    Active
    </button>
  <button ng-click="inactive()">
    Inactive
    </button>
</div>

{{ServiceData}}

指令：
控制器：
活跃的
不活跃的

您的事件侦听器执行，但Angular对此一无所知，因此它不知道必须检测更改

---

添加

范围$apply（）在click listener的evn处，它将按预期工作。
我想感谢您提供的代码示例，但由于它没有解释原因，我需要对第一个响应给出正确的答案。@kisonay，只要您的问题得到解决，这是完全正确的；）
app.directive('launcher', function(Service) {
  return {
    restrict: "A",
    link: function(scope, elem, attrs) {
      elem.bind('click', function(event) {
        scope.$apply(function() {
          if (Service.data.active) {
            Service.changeActive(false);
          } else {
            Service.changeActive(true);
          }
        });
      });
    }
  };
});