title: angular prevent calling a function who made promise on multiple webservice until it finish
body: <p>I'm using angular 1.4.1</p>
  
  <ol>
  <li><p>I use two webservices from a server ( i cannot edit them )</p>
  
  <ul>
  <li><code>/institutions</code> who return me a list of institutions with ids</li>
  <li><code>/institution/XXX/collections/</code> ( with XXX is a institution id) who return me the collections of the current institution</li>
  </ul></li>
  <li><p>I create a service function (<code>getInstitutions()</code>) who use this webservices to get all the data about institutions and there sub collections :</p>
  
  <pre><code> var singleton_institutions = null ; 
   this.getInstitutions = function(){
         var getHrefCollections = function(links){
           for(var l in links){ if(links[l]["rel"] == "collections"){ return links[l]["href"]; }}
           return null ;
        };
        if(singleton_institutions != null){
           // don't reload the data if already loaded
           return $timeout( function(){
              return singleton_institutions ;
           }, 0);
        }else {
           var institutions = [];
           var url = $rootScope.api + "institutions";
           return $http({
              method: 'GET',
              url: url
           }).then(
               // we have the institutions list, now get each sub collections
               function successCallback(response) {
                  institutions = response.data;
                  var promises = [];
                  for (var i in response.data) {
                     var url = getHrefCollections(response.data[i]["links"]);
                     promises.push( //Push the promises into an array
                         $http({
                            method: 'GET',
                            url: url
                         }).then(function successCallback(response) {
                             return response.data;
                         })
                     );
                  }
                  return $q.all(promises); // Resolve all promises before going to the next .then
               },
               function errorCallback(response) {
                  console.log(response);
               }
           ).then(
               function (resultArray) {
                  // formating the data
                  for (var i in resultArray) {
                     institutions[i]["collections"] = resultArray[i];
                     institutions[i]["institutionname"] = tools_getInstitutionName(institutions[i]["institutioncode"]);
                  }
                  singleton_institutions = institutions;
                  return singleton_institutions ;
               },
               function (error) {
                  console.log(error);
               }
           );
        }
     };
  </code></pre></li>
  <li><p>The problem : </p></li>
  </ol>
  
  <p>In my service function i make a chained promise with $q, this work good, it take few seconds because it launch approximatly 30 https call (one per institution).</p>
  
  <p>In the application initialization, this function are called twice in approximatly the same time. 
  So the first call don't have time to finish and to init <code>singleton_institutions</code> before the second call so i have 60 http's call instead of half.</p>
  
  <pre><code>//call from a controller A
  services.getInstitutions().then(function (institutions) {...}); // take few seconds to load the datas
  //call from a controller B in near the same time
  services.getInstitutions().then(function (institutions) {...}); // so this will make all the data load again because the first call is not finished
  </code></pre>
  
  <ol start="4">
  <li>QUESTION : </li>
  </ol>
  
  <p>How to prevent <code>services.getInstitutions()</code> to get the data if another call is not finished yet. </p>