title: Angularjs view doesn't update
body: <p>I'm trying to update a view through a controller that sources its data from a service. For some reason, the view doesn't update when the service's data changes. I've distilled an example from my application <a href="http://plnkr.co/edit/yD9oq46i5mgmtMz5y9BD?p=preview" rel="nofollow">here</a>. I've tried all sorts of bindings (<code>$scope.time = TimerService.value</code>, wrapped in a function, using <code>$watch</code> - no success).</p>
  
  <p>Note, in my original app, this is an array of objects and an object's attribute changes.</p>
  
  <p>-- script.js --</p>
  
  <pre><code>var mod = angular.module('mymodule', []);
  
  mod.service('TimerService', function() {
    this.value = 0;
    var self = this;
    setInterval(function() {
      self.value += 1;
    }, 2000)
  });
  
  mod.controller('TimerCtrl', ['TimerService', '$scope', function(TimerService, $scope) {
    $scope.time = TimerService.value;
    $scope.$watch(function() {
      return TimerService.value;
    }, function(newValue) {
      $scope.time = newValue;  
    }, true);
    $scope.otherValue = '12345';
  }]);
  
  
  angular.element(document).ready(function() {
    alert('start');
    angular.bootstrap(document, ['mymodule']);
  });
  </code></pre>
  
  <p>-- index.html --</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script src="./angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
        &lt;div ng-controller="TimerCtrl"&gt;
            &lt;h1&gt;- {{ time }}-&lt;/h1&gt;
            &lt;h2&gt;{{ otherValue }}&lt;/h2&gt;
        &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>