title: How to make $q await multiple async tasks?
body: <p>Using the $q service with Angular, I've written a function that fetches data asynchronously.  The example below is a bit simplified, but similar to my production code:</p>
  
  <pre><code>DataService.fetchData(1)
  .then(function (data1) {
      this.data1 = data;
      DataService.fetchData(2)
      .then(function (data2) {
          this.data2 = data2;
          DataService.fetchData(3)
          .then(function (data3) {
              this.data3 = data3;
              doSomething(this.data1, this.data2, this.data3);
          }, function () {
              alert("failure getting data 3");
          })
      }, function () {
          alert("failure getting data 2");
      });
  }, function () {
      alert("failure getting data 1");
  });
  </code></pre>
  
  <p>Suppose that I need to make three asynchronous function calls to fetch data, as above.  The data is then displayed via an Angular view.</p>
  
  <p>However, the above code is very flawed.  It is difficult to read and the function calls are deeply nested.  I would like to write something similar that will make the three asynchronous function calls and execute some function to handle the data only after all three functions have finished and, in the event of an error, there should be only one error handler function.</p>
  
  <p>It should also be noted that it is unknown what order the functions will return their asynchronous data.</p>
  
  <p>How do I do this in Angular?</p>