Query multiple SharePoint lists Using REST API and angular JS

Question

I am using a provider hosted app and developing the app using angular js and SharePoint REST API for fetching List data.

I am facing an issue with calling SharePoint lists through multiple cross domain calls to SharePoint REST API. I have 2 controllers calling the same service on different user interactions. The first call gets the data properly but when the user clicks a button to call second controller on a different user interaction to fetch data from a different list i get a request timed out error. I am initiating the SP.RequestExecutor every time the service is called. I am not sure why this is working when i call the service multiple times through one controller but not when i call the service through another controller. Could you please let me know if the above issue you were facing has been resolved? Below is my code sample.

Service Call:

var getRequest = function (listTitle) {
 deferred = $q.defer();
  var executor = new SP.RequestExecutor(appweburl);
            executor.executeAsync({

                url: query,
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data, textStatus, xhr) {
                    deferred.resolve(JSON.parse(data.body));
                },
                error: function (xhr, textStatus, errorThrown) {
                    deferred.reject(JSON.parse(xhr.body).error);
                }
            }); return deferred.promise;

        };
        return {
            getRequest: getRequest

        };

Controller 1:

app.controller("progressController", ["$scope", "baseSvc", "$q", "$filter",
function ($scope, baseSvc, $q, $filter) {
   $scope.profiles = [];
                     executeOnSPLoaded(function () {
                      $q.all([baseSvc.getRequest('CandidateList'), baseSvc.getRequest('GeneralSearchDocuments')]).then(function (data) {
            $scope.profilesFromSp = data[0].d.results;
           $scope.Candidatedocuments = data[1].d.results;
           $scope.loadData();
            });
   });

Controller 2: (Fails when user clicks button to execute this call)

app.controller("documentsController", ["$scope", "baseSvc", "$q", "$filter",
    function ($scope, baseSvc, $q, $filter) {
            executeOnSPLoaded(function () {
            $q.all([baseSvc.getRequest('GeneralSearchDocuments')]).then(function (data) {
                  $scope.documents = data[0].d.results;

            });
        });

Load SP.js & SP.RequestExecutor

function executeOnSPLoaded(loaded) {

    var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    var scriptbase = hostweburl + "/_layouts/15/";
    $.when(
        //$.getScript(scriptbase + "SP.Runtime.js"),
        $.getScript(scriptbase + "SP.js"),
        $.getScript(scriptbase + "SP.RequestExecutor.js"),
        $.Deferred(function (deferred) {
            $(deferred.resolve);
        })
    ).done(function () {
        loaded();
          });
}

Answer 1

You loading SP.js and SP.RequestExecutor.js in every call to baseSvc. That is not needed. Try following

1. Load SP.js and SP.RequestExecutor.js in document ready
2. Then initialize angular app

Example

$(document).ready(function() {
    var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    var scriptbase = hostweburl + "/_layouts/15/";
    $.when(
        //$.getScript(scriptbase + "SP.Runtime.js"),
        $.getScript(scriptbase + "SP.js"),
        $.getScript(scriptbase + "SP.RequestExecutor.js"),
        $.Deferred(function(deferred) {
            $(deferred.resolve);
        })
    ).done(function() {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['Your App Name']);
        });
    });
});

In the controllers, just call something like

$q.all([baseSvc.getRequest('GeneralSearchDocuments')]).then(function(data) {
    $scope.documents = data[0].d.results;
});

Meaning remove all executeOnSPLoaded.

Also see Angular's Manual Initialization