How do I get the data out of multiple ajax calls?

Question

Here I am calling fetchbookAllNew() method from fetchBooks() but with this ajax loader is not working properly.What I want when fetchBooks is called ajax loader should display untill all data I will get in .done function.

$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;

        };

Answer 1

This should do it, you need to return the ajax promise, not the result. The done() resolves the result for you. More info

$scope.fetchBooks = function(){
        $(".loader").show();
        $.when(
                fetchbookAllNew("all"),
                fetchbookAllNew("epub"),
                fetchbookAllNew("collection"),
                fetchbookAllNew("video"),
              ).done(function(publishedAll, publishedEpub, publishedColl,publishedVideo){
                // Each argument is an array with the following 
                //                   structure: [ data, statusText, jqXHR ]
                //so [0] is data
                $scope.allkitabooBooks = publishedAll[0];
                $scope.allEpubBooks =publishedEpub.data[0];
                $scope.allcollectionbooks = publishedColl.data[0];
                $scope.allvideosbooks = publishedVideo.data[0];
                $(".loader").fadeOut("slow");
              });
    };

    var fetchbookAllNew = function(status){
             return $.ajax({
                  url:'/booksList', // Dynamically uploads the files which is chosen.  
                  type: 'GET',
                  headers : {
                        'usertoken' : $rootScope.userDetails.userToken,
                        'status':status
                            },
                  cache: false,
                  //async: false,//don't EVER do this
                  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.   
              });
        };

Never ever use ajax:false. It defeats the object of promises and ajax.