angular js : How to call multiple asynchronous http request one after another and store the respone for later use?

Question

Please Please Help:( (disapointed)

I have a table in my mysql database that stores avalabe book times;

In my site , there are to buttons that user can hit and get the related avalable book times , which you can see in the picture attached .

Every time user hits arrow left/right , I will trigger a factory function and then I'll get a data that contains avalabe books related to that day ,Everything works fine so far.

Problem: When user first comes into my site , I'll get the current day and I'll show the avalable book times related to that day(today) , and when user hits the arrow left/right , I'll get avalabe books related to three days later from today. that works fine too.

But this is Slow.

I want that when user comes into my site , I get the data related to today up until two month later .

But I want to show just today's(and next day , and next 2day) avalabe books. So when user clicks on arrow left/right , I wont have to call another http request and force the user to wait until my data is avalabe to see.

Is there a way to define some asynch http requests and store the callback success data , but dont use it until user hits a special key(in my case an arrow left/right)???

Here is my http request function in a factory :

     app.factory('ShowBookingFacDrProfile',function($http){
         return{
             showbooking:function(scope){
                 $http.post("partials/search-drprofile/show_available_books.php",{today,nextday,next2day})// I just simplicized the object that I send here
                     .success(function(msg){
                       scope.booking=msg;;
                      //here I want to do something like this : 
                      then.post('sameURL',{next3day,next4day,next5day})
                     // I want to repeat this until 2 month later from today
                      then.post('sameURL',{next6day,next7day,next8day})

              }
         }
     });

related Controller:

    $scope.hitArrow = function(current) {
    $scope.pager = current;
    SearchFac.search($scope);
};

Noting special in my controller

I know that I can use promises ! , but How to store them ? where ?How to use them later ?

I can't store them in a new scope.booking , for e.g : scope.booking2 , because then I can't use them properly :(

I cannot use cache because maybe every minute avalabe books has changed :(

This is my view:

   <div class='col-xs-4'>
       <table class='table table-responsive' >
           <tr data-ng-repeat='v in booking |filter:{month:date.next2month} |filter:{day:date.next2day}'>
           <td><a>{{v.hour}}</a></td>
           </tr>
       </table>
   </div>

   <div class='col-xs-4'>
       <table class='table table-responsive' >
           <tr data-ng-repeat='v in booking |filter:{month:date.nextmonth} |filter:{day:date.nextday}'>
               <td><a>{{v.hour}}</a></td>
           </tr>
       </table>
   </div>

   <div class='col-xs-4'>
       <table class='table table-responsive' >
           <tr data-ng-repeat='v in booking |filter:{month:date.today} |filter:{day:date.today}'>
               <td><a>{{v.hour}}</a></td>
           </tr>
       </table>
   </div>

NOTE Actually I've seen this approach in this site Click

Please see, and hit the arrows you'll see how fast new avalable book times comes into the view

Answer 1

If $scope. booking is an array, you just have to append the contents of the http responses (array.push(object)).