title: How do I get the data out of multiple ajax calls?
body: <p>Here I am calling <code>fetchbookAllNew()</code> method from <code>fetchBooks()</code> but with this ajax loader is not working properly.What I want when <code>fetchBooks</code>  is called ajax loader should display untill all data I will get in <code>.done</code> function.</p>
  
  <pre><code>$scope.fetchBooks = function(){
          $(".loader").show();
          $.when(
  
                  fetchbookAllNew("all"),
                  fetchbookAllNew("epub"),
                  fetchbookAllNew("collection"),
                  fetchbookAllNew("video"),
  
                ).done(function(publishedAll, publishedEpub, publishedColl,publishedVideo){
  
                    $scope.allkitabooBooks = publishedAll;
                  $scope.allEpubBooks =publishedEpub;
                  $scope.allcollectionbooks = publishedColl;
                  $scope.allvideosbooks = publishedVideo;
  
                  $(".loader").fadeOut("slow");
                });
  
  
      };
  
      var fetchbookAllNew = function(status){
              var books = undefined;
  
               $.ajax({
                    url:'/booksList', // Dynamically uploads the files which is chosen.  
                    type: 'GET',
  
                    headers : {
                          'usertoken' : $rootScope.userDetails.userToken,
                          'status':status
                              },
                    cache: false,
                    async: false,
                    processData: false,           // Don't process the files
                    contentType:'application/json',   // Setting content type to "application/octet-stream"/"undefined" as jQuery will tell the server its not query string.
  
                    success: function (data) {
                        books=data;
  
                    },
                    error: function (data) {
  
                    }
                });
               return books;
  
          };
  </code></pre>