title: Nested promises not resolving until a button is clicked
body: <p>I'm building an AngularJS app (using 1.2.0 RC1) that uses a REST API for saving data that the user has entered. The user will enter data about a company and it consists of two core components that I need to save:</p>
  
  <ul>
  <li>The company details</li>
  <li>Contacts within that company</li>
  </ul>
  
  <p>I have 1 REST method to call to save the company and then I have another that I call for each contact to be saved.</p>
  
  <p>I planned to use <code>$q</code> to track all the requests and resolve them once it's completed.</p>
  
  <p>The problem I've hit is that although the REST API is being called successfully and all my data is being saved my controller isn't being notified when all the promises have resolved <em>until</em> I click a button on the screen, such as the <code>add contact</code> button. I've tried eliminating the REST API as a source of problems but it still happens when simulating delayed jobs using <code>setTimeout</code>.</p>
  
  <p>Here's my <code>service</code> module:</p>
  
  <pre><code>angular.module('myApp', ['restService'])
      .factory('service', ['client', '$q', function (client, $q) {
          return {
              create: function (name, people) {
                  var deferred = $q.defer();
  
                  setTimeout(function () {
                      console.log('saved company ' + name);
  
                      var promises = people.map(function (person) {
                          var dfd = $q.defer();
  
                          setTimeout(function () {
                              console.dir(person);
                              console.log('Person saved');
                              dfd.resolve();
                          }, 100);
  
                          return dfd.promise;
                      });
  
                      $q.all(promises).then(deferred.resolve);
                  }, 100);
  
                  return deferred.promise;
              }
          };
      }]);
  </code></pre>
  
  <p>And here's my controller:</p>
  
  <pre><code>angular.module('club', ['myApp'])
      .controller('RegisterCtrl', ['$scope', 'service', function ($scope, service) {
          $scope.addPerson = function () {
              $scope.company.people.push({
                  firstName: '',
                  lastName: '',
                  email: ''
              });
          };
  
          $scope.removePerson = function (person, index) {
              $scope.company.people.splice(index, 1);
          };
  
          $scope.save = function (company) {
              service.createClub(company.name, company.people).then(function () {
                  console.log('And we\'re done');
              });
          };
  
          $scope.company = {
              name: '',
              people: []
          };
      }]);
  </code></pre>
  
  <p>So when I invoke the <code>save</code> method (which is <code>ng-click</code> bound to a button) I will have a console.log set like this:</p>
  
  <pre><code>saved company
  Object
  Person saved
  Object
  Person saved
  </code></pre>
  
  <p>Notice there's no <code>And we're done</code> output. As soon as I click the button that <code>addPerson</code> is <code>ng-click</code> bound to I get the final message output.</p>