title: AngularJS How do I make sequential $http calls to access more data?
body: <p>For the AngularJS $http service,</p>
  
  <p>How do I loop $http calls in order to access sequential data, while each call needs the previous return data to be used in the next call?</p>
  
  <p>I want to make sequential $http requests which require return data from the previous call. I am trying to fetch all of the followers from the Instagram API. The server limits the return data and provides an offset to make another call if there is more data to be fetched. Check out the Pagination heading at <a href="http://instagram.com/developer/endpoints/" rel="nofollow">http://instagram.com/developer/endpoints/</a> if that isn't clear.</p>
  
  <p>My solution works, but I think it's ugly, unsafe, and there has to be a better way. What I do is recursively call a function that executes the $http, passing in the function itself and executing it in the promise if needed.</p>
  
  <p>So, my question is: is there another way to do this without recursively calling within the promise?</p>
  
  <p>This is my first stackoverflow post, so I apologize for how poorly I've organized my thoughts...</p>
  
  <pre><code>var app = angular.module('instagramApp', ['ngRoute']);
  
  app.controller('FollowsCtrl', ['$scope', 'Instagram', '$http', function($scope, Instagram, $http){
  
      $scope.follows          = [];
      $scope.follows_count    = 0;
  
      loadFollows();
  
      function loadFollows(){
          Instagram.getFollows().then(function(users){
              $scope.follows          = users;
              $scope.follows_count    = users.length;
          });
      }
  
  }]);
  
  //Communicates with Server
  app.service('Instagram', ['$http', function($http){
  
      //Return public API.
      return ({
          getFollows: getFollows
      });
  
      //Public method
      function getFollows(){
          return _getFollows(_getFollows, '', []);
      }
  
      //Recursive private method
      function _getFollows(callback_fn, cursor, users){
          var base = 'https://api.instagram.com/v1/users/12345678910/follows';
          var access_token = '?access_token=PUT_ACCESS_TOKEN_HERE=JSON_CALLBACK';
          var url = base + access_token + cursor;
  
          return $http.jsonp(url).then(
  
              //success
              function(result){
  
                  //add follow users from server to array
                  users = users.concat(result.data.data);
  
                  //check if more data needs to be retrieved from the server
                  if(result.data.pagination.next_cursor)
                  {
                      cursor = '&amp;cursor=' + result.data.pagination.next_cursor;
  
                      //TODO: call again if more data to retrieve
                      return callback_fn(callback_fn, cursor, users);
                  }
                  //all data fetched, return it
                  else
                  {
                      return users;
                  }
              }, 
  
              //error
              function(result){
                  console.log('error');
              });
      };
  
  }]);
  </code></pre>