Наблюдение заводской переменной от контроллера

Упрощенный код: 

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

myApp.factory("mySrvc", function($window) {
  var win = angular.element($window);
  var foo = {
    bar: 0
  };
  
  win.bind("click", function(){
    foo.bar = foo.bar + 1;
    alert("triggered! foo.bar="+foo.bar);
  });
    
  return {
    foo: foo,
    update: function() {
      foo.bar = foo.bar + 1
    }
  };
});

myApp.controller("myCtrl", function(mySrvc) {
  this.foo = mySrvc.foo;
  mySrvc.update();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as ctrl">
      {{ctrl.foo.bar}}
    </div>
  </body>
</html>

Теперь, когда я запускаю приложение, триггер обновления в контроллере успешно обновляет foo.bar до 1, а наблюдатель из модели {{}} соответственно обновляет html. Но он обновляется на самой фабрике, щелкая мышью, что делает то же самое, что и функция обновления, изменение не появляется в HTML.
любые попытки с дополнительной областью видимости в контроллере были неудачными. Почему это и как сделать Я наблюдаю за этой переменой?

1 2
javascript angularjs angularjs-scope angularjs-factory angular-digest

1 ответ:

Как предложил @NewDev, вы можете использовать $rootScope.$apply или просто вы можете сделать это косвенно, добавив $timeout, который будет запускать цикл дайджеста для вас.

Код 

win.bind("click", function() {
    $timeout(function() {
       foo.bar = foo.bar + 1;
       alert("triggered! foo.bar=" + foo.bar);
    });
});

Рабочий Плунжер

2