title: AngularJS update view with service/model changes using $q promises
body: <p>I'm trying to load data from a service and update the view using $q, but it's not working.  It works if I put the http call inside the controller, but I'd prefer it be part of the service.  </p>
  
  <p>Any help?  Also, is there a better way to do this instead of promises?</p>
  
  <p>Demo and code below.</p>
  
  <p>---------- <a href="http://jsfiddle.net/m3hZ9/" rel="nofollow"><strong>Fiddle Demo Link</strong></a> ----------</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div ng-init="getData()"&gt;
    &lt;div ng-repeat="item in list"&gt;{{item.name}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>.controller('ctrl', ['$scope', 'dataservice', '$q', function ($scope, dataservice, $q) {
  
    $scope.list = dataservice.datalist;
  
    var loadData = function () {
      dataservice.fakeHttpGetData();
    };
  
    var setDataToScope = function () {
      $scope.list = dataservice.datalist;
    };
  
    $scope.getData = function () {
      var defer = $q.defer();
      defer.promise.then(setDataToScope());
      defer.resolve(loadData());
    };
  
  }])
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>.factory('dataservice', ['$timeout', function ($timeout) {
  
    // view displays this list at load 
    this.datalist = [{'name': 'alpha'}, {'name': 'bravo'}];
  
    this.fakeHttpGetData = function () {
      $timeout(function () {
  
        // view should display this list after 2 seconds
        this.datalist = [{'name': 'charlie'}, {'name': 'delta'}, {'name': 'echo'}];
      },
      2000);
    };
  
    return this;
  }]);
  </code></pre>