title: AngularJS : How to watch service variables?
body: <p>I have a service, say:</p>
  
  <pre><code>factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) {
    var service = {
      foo: []
    };
  
    return service;
  }]);
  </code></pre>
  
  <p>And I would like to use <code>foo</code> to control a list that is rendered in HTML:</p>
  
  <pre><code>&lt;div ng-controller="FooCtrl"&gt;
    &lt;div ng-repeat="item in foo"&gt;{{ item }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In order for the controller to detect when <code>aService.foo</code> is updated I have cobbled together this pattern where I add aService to the controller's <code>$scope</code> and then use <code>$scope.$watch()</code>:</p>
  
  <pre><code>function FooCtrl($scope, aService) {                                                                                                                              
    $scope.aService = aService;
    $scope.foo = aService.foo;
  
    $scope.$watch('aService.foo', function (newVal, oldVal, scope) {
      if(newVal) { 
        scope.foo = newVal;
      }
    });
  }
  </code></pre>
  
  <p>This feels long-handed, and I've been repeating it in every controller that uses the service's variables.  Is there a better way to accomplish watching shared variables?</p>