title: returning defer.promise not working as expected
body: <p>I've started doing Angular for three days now and I can't wrap my head around the concept of promise.</p>
  
  <p>I'm trying to create a factory to share JSON data between two controllers. The data represent a serialized SQL datatable.</p>
  
  <p>The factory fetches the data using $http</p>
  
  <pre><code>var app = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
  
  app.factory('Tableau', function ($http, $q) {
      var obj = {};
      obj.getTable = function (page) {
              var temp = {};
              var defer = $q.defer();
              $http.get('api/Table/' + page).then(function (resolve) {
                  defer.resolve(resolve.data);
              });
              return defer.promise;
      }
      return obj;
  });
  </code></pre>
  
  <p>The first controller should display the data as an HTML table</p>
  
  <pre><code>app.controller("TableController", function ($scope, Tableau) {
      $scope.elements = Tableau.getTable(2); // get the first ten rows with row id &gt;= n x 10 (in this case 2 x 10)
  });
  </code></pre>
  
  <p>And here's the HTML code with the ng directives</p>
  
  <pre><code>&lt;tr ng-repeat="t in elements.myarray track by $index"&gt;
      &lt;td ng-repeat="(k,v) in t track by $index"&gt;
          &lt;div ng-if="k.indexOf('#')===0"&gt;
              &lt;span class="label label-default" ng-repeat="vv in v.split(';')"&gt;{{vv}}&lt;/span&gt;&lt;br /&gt;
          &lt;/div&gt;
          &lt;div ng-if="k.indexOf('§')===0"&gt;
              &lt;a href="{{v}}"&gt;Lien&lt;/a&gt;
          &lt;/div&gt;
          &lt;div ng-if="k.indexOf('#')!=0 &amp;&amp; k.indexOf('§')!=0"&gt;
              {{v}}
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I have no problem calling $http from the controller, but when I moved the code to the factory, $scope.elements contains a promise object instead of my expected JSON object.</p>
  
  <p>I did not implement the second controller, which would create a pagination for the table (using <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">ui-bootstrap</a>)</p>
  
  <ol>
  <li><p>How can I wait for $http to complete before returning returning an object from the factory ?</p></li>
  <li><p>If this isn't possible, how can I share data retrieved from a server in a single move ?</p></li>
  </ol>
  
  <p>Thanks in advance.</p>