title: Angular async service
body: <p>I'm trying to do an ajax call via <code>$http</code> service inside a custom service. Then I want to customize, inside my controller, the data received in the custom service.</p>
  
  <p>I wrap the customizing data function within <code>$interval</code> inside the controller: by this way I can customize my data when it is received.</p>
  
  <p><strong>The problem is</strong>: while the data is correctly logged in the service, <strong>the service seems like it doesn't return anything</strong>, although it should have returned (<code>return response.data.Items</code>)</p>
  
  <p>So <code>$interval</code> loops indefinitely, and I can't customize my data.</p>
  
  <pre><code>var myApp = angular.module('MyApp', []);
  
  
  myApp.service('ajaxcall', ['$http', function($http) {
  
      this.getjson = function () {
  
          $http.get("http://localhost:3000/one")
              .then(function(response) {
  
              console.log(response.data.Items);  //data logged correctly
              return response.data.Items;
          });
      }
  }])
  
  .controller('MyCtrl', ['$scope', '$interval', 'ajaxcall', function($scope, $interval, ajaxcall) {
  
      var new_items = ajaxcall.getjson();
  
      customize_data = $interval(function () {  //loops indefintely, new_items=undefined, why?
                           if (new_items) {
                               // customize data
                           }
                       }, 200);
  
      for(var i=0; i&lt;new_items.length; i++) {
          $scope.items.push(new_items[i]);
      }
  }]);
  </code></pre>
  
  <p>You could say: just move the customize data function in the custom service. First at all I don't want to do it. Secondly it doesn't even make sense: the $scope is not available in a service, so in any case I should wait for the $http reply.</p>