title: Proper way to set up angularjs factory with cached data
body: <p>I'm just starting out with Angular.js and I'm trying to figure out how to set up a factory that will show cached data and replace it with data retrieved from a REST service once it is received. </p>
  
  <p>To test this out, I'm just hard-coding the "cached" data. Once the data is received, I want the $scope.directory variable to be updated with the latest data received from the server. I can either get it </p>
  
  <p>Here's my factory code:</p>
  
  <pre><code>app.factory('directoryFactory', function ($http) {
  var factory = {};
  factory.directory = [{name: "Test", ext: "123"},{name: 'Bob', ext: "234"}];
  
  init();
  function init() {
      $http({
          method: 'GET',
          url: '{restapiURL}'
  
      })
          .success(function (data, status, headers, config) {
              factory.directory=data;
          })
          .error(function (data, status, headers, config) {
              console.log('directory fail');
          });
  }
  
  }
  </code></pre>
  
  <p>My Controller has the following code:</p>
  
  <pre><code>$scope.directory = directoryFactory.directory;
  </code></pre>
  
  <p>In my view, I use ng-repeat to list out all the people and their extensions.</p>
  
  <p>I'd like the view to be updated once the data is received. What's the correct way to watch for factory data changes?</p>