title: Multiple chained deferred functions using q in AngularJS stop returning data
body: <p>I am trying to chain together multiple deferred function calls such that the next call gets the results of the previous deferred.resolve. When I chain together more than 2 of these calls, the data stops being returned.</p>
  
  <p>Here is the basic code inside an angular controller:</p>
  
  <pre><code>    $scope.runAsync = function() {
          var asyncFn1 = function(data){
              var deferred = $q.defer();
  
              $timeout(function(){
                  console.log("Async fn1 " + data);
                  $scope.outputLines.push("Async fn1 " + data);
                  deferred.resolve("Async fn1 " + data);
              },1000);
  
              return deferred.promise;
          }
  
          var asyncFn2 = function(data){
              var deferred = $q.defer();
  
              $timeout(function(){
                  console.log("Async fn2 " + data);
                  $scope.outputLines.push("Async fn2 " + data);
                  deferred.resolve("Async fn2 " + data);
              },1000);
  
              return deferred.promise;
          }
  
          asyncFn1(1)
          .then(function(data){asyncFn2(data)})
          .then(function(data){asyncFn2(data)})
          .then(function(data){asyncFn2(data)});
      }
  </code></pre>
  
  <p>When I run this I get the following output:</p>
  
  <pre><code>Async fn1 1
  Async fn2 Async fn1 1
  Async fn2 undefined
  Async fn2 undefined
  </code></pre>
  
  <p>How can I chain them together so that the third call gets the result from the second call and the fourth gets the result from the third?</p>
  
  <p>I have created a jsFiddle: <a href="http://jsfiddle.net/rhDyL/" rel="noreferrer">http://jsfiddle.net/rhDyL/</a></p>