title: AngularJS: Waiting for Multiple asynchronous calls in a single function
body: <p>I have an AngularJS function in which I am making 2 async calls. The 2 calls are not dependent but the function should only return when both calls are finished and result is stored in the return var.</p>
  
  <p>I tried different solutions and ending up using the one shown below. But its very slow as its wait for the first one to finish       </p>
  
  <pre><code>        function myAngularfunction(a, b) {
          var defer = $q.defer();
          var test= {
              a: "",
              b: ""
          };
  
          msGraph.getClient()
              .then((client) =&gt; {
                  // First Async call
                  client 
                  .api("https://graph.microsoft.com/v1.0/")
                  .get()
                   .then((groupResponse) =&gt; {
                          var result = groupResponse;
                          test.a= result.displayName;
  
                          msGraph.getClient()
                              .then((client) =&gt; {
                                  // Second Async call
                                  client
                                      .api("https://graph.microsoft.com/v1.0/teams/")
                                      .get()
                                      .then((groupResponse) =&gt; {
                                          var result = groupResponse;
                                          test.b= result.displayName;
                                          defer.resolve(test);
                                      });
  
                              });
  
                      });
              });
  
  
          return defer.promise;
      }
  </code></pre>
  
  <p>Calling the function</p>
  
  <pre><code>myAngularfunction(a, b).then(function(obj)
  </code></pre>
  
  <p>How can I wait for the both calls in the same function with out nesting them? Or calling the next one without waiting for the first one to finish.</p>