angularjs - Angular で別のコントローラーからコントローラーを更新する

Question

Angular で 2 つのコントローラーが互いに通信できるようにするには、両方のコントローラーがアクセスできる共通のサービスを作成することをお勧めします。これを非常に単純なフィドルで説明しようとしました。押したボタンに応じて、アプリはボタンの下のメッセージを調整することになっています。

では、なぜこれが機能しないのでしょうか。明らかな、またはより基本的な何かが欠けていますか?

HTML

<div ng-controller="ControllerOne">
  <button ng-click="setNumber(1)">One</button>
  <button ng-click="setNumber(2)">Two</button>
</div>
<div ng-controller="ControllerTwo">{{number}} was chosen!</div>

JavaScript

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

app.factory("Service", function () {
  var number = 1;
  function getNumber() {
    return number;
  }
  function setNumber(newNumber) {
    number = newNumber;
  }
  return {
    getNumber: getNumber,
    setNumber: setNumber,
  }
});

function ControllerOne($scope, Service) {
  $scope.setNumber = Service.setNumber;
}

function ControllerTwo($scope, Service) {
  $scope.number = Service.getNumber();
}