title: use $http.get in a service/factory to return a collection
body: <p>I try to use a <code>http.get</code> promise in an angularjs service, do some manipulation on the obtained collection and finally return it to a controller...</p>
  
  <p>My question is how to use a <code>$http.get()</code> in a service in order to obtain and manipulate the result <strong>before</strong> returning it to the controller, like in the code bellow :
  <a href="http://codepen.io/anon/pen/QjxQmj?editors=101" rel="nofollow">The PEN code</a>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  
  app.controller('customersCtrl', ['$scope','customer',function($scope, customer) {
    $scope.odds = customer.odds;
  }]);
  
  app.factory('customer', ['$http', function($http) {
    var all = [{'Id':88, 'Name':"A"}, {'Id':89, 'Name':"ShoutNotBeHere"}]; 
    var odds = [];
  
    $http.get("http://www.w3schools.com/angular/customers.php")
      .then(function(response) {
        all = response.records;
      });
  
    angular.forEach(all, function(c, i) {
      if (i % 2 == 1) {
        odds.push(c);
      }
    });
  
    return {odds: odds};
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div ng-app="myApp" ng-controller="customersCtrl"&gt;
      Odd ids from www.w3schools.com/angular/customers.php
      &lt;ul&gt;
        &lt;li ng-repeat="c in odds"&gt;
          {{ c.Id + ', ' + c.Name }}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>