Обновите контроллер с другого контроллера в Angular

Чтобы два контроллера разговаривали друг с другом в Angular, рекомендуется создать общую службу, доступную для обоих контроллеров. Я попытался проиллюстрировать это в очень простой fiddle. В зависимости от того, какую кнопку вы нажимаете, приложение должно подгонять сообщение под кнопками.

Так почему же это не работает? Я пропустил что-то очевидное или более фундаментальное?

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();
}

Ответ 1

Попробуйте создать часы в контроллере:

$scope.$watch(function () { return Service.getNumber(); },
   function (value) {
       $scope.number = value;
   }
);

Вот рабочий скрипт http://jsfiddle.net/YFbC2/

Ответ 2

Похоже на проблему с содержащим примитивное значение. Таким образом, вы можете внести следующие изменения:

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

См. fiddle

Ответ 3

Просто позвоните в HTML Service.getNumber() и в контроллере ControllerTwo вызовите Службу как:

 $scope.Service = Service;

Пример:

HTML

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

JS

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

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

Демо Fidlle