title: AngularJs $scope doesn't update after a GET request on a factory
body: <p>I have been trying AngularJS for a experimental project and I came along with this problem.
  In my html I want to display a list of items</p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;h1&gt;Some list&lt;/h1&gt;
  &lt;div ng-controller="datlist"&gt;
      &lt;div ng-repeat="item in items"&gt;
          &lt;div&gt;Item description: {{item.description}}&lt;/div&gt;
          &lt;div&gt;Item name: {{item.name}}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>At first I was using a simple controller to get the information and update the view just using this:</p>
  
  <p><strong>controllers.js (original)</strong></p>
  
  <pre><code>function datlist($scope,$http){
  $http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
      success(function(data, status, headers, config) {
          $scope.items=data.itemsToReturn;
          console.log(data);
  }).
  error(function(data, status, headers, config) {
      console.log("fail");
  });
  
  }
  </code></pre>
  
  <p>This was working pretty well and I could get the list of items. Whilst, by changing my structure to use a factory to make the same request and bind it to $scope.items it doesn't work. I tried a lot of variations of $watch but I couldn't get it to update $scope.items. I found something about $apply but I really can't understand how to use it.</p>
  
  <p><strong>controllers.js (new one)</strong></p>
  
  <pre><code>var datModule = angular.module('datModule',[]);
  datModule.controller('datlist', function ($scope, datfactory){
      $scope.items = datfactory.getlist();
      $scope.$watch($scope.items, $scope.items = datfactory.getlist());
  });
  datModule.factory('datfactory', function ($http){
      var factory = {};
      factory.getlist = function(){
          $http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
          success(function(data, status, headers, config) {
              console.log(data.itemsToReturn); //I get the correct items, all seems ok here
              return data.itemsToReturn;
          }).
          error(function(data, status, headers, config) {
              console.log("fail");
          });
  
      }
      return factory;
  });
  </code></pre>
  
  <p>Any ideas about this will be great.
  PS: I found a lot of posts talking about this issue but none of them helped me to get a full solution.</p>
  
  <p>Thanks</p>