title: Promise chaining when using $timeout
body: <p>I'm trying to understand the promise API and chaining, particularly the timing when <code>$timeout</code>is used with <code>.then()</code>. What I had expected from the following is that since <code>$timeout</code> returns a promise, <code>.then()</code> would not be called until it had resolved. </p>
  
  <p>But instead of ABAB, it's ABBA all the time.</p>
  
  <p>How can I use the promise API to ensure that a long-running call (or delayed call using <code>$timeout</code>) is actually complete before the <code>.then()</code> gets executed?</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>angular
    .module('app', [])
    .controller('ThenCtrl', ThenCtrl);
  
  function ThenCtrl($timeout, $q) {
    var vm = this;
  
    vm.items = [];
  
    $q.when(pushA()).then(pushB());
  
    $timeout(pushA, 5000).then(pushB());
  
    function pushA() {
      vm.items.push('A');
    }
  
    function pushB() {
      vm.items.push('B');
    }
  }
  </code></pre>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;div ng-app="app"&gt;
    &lt;div ng-controller="ThenCtrl as vm"&gt;
      {{vm.items}}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've set up a fiddle: <a href="https://jsfiddle.net/kan3c61t/">https://jsfiddle.net/kan3c61t/</a></p>