Не могу получить обещания Angularjs, действующие правильно

Question

Я знаю, что кое-что мне до сих пор не хватает, хватая обещаний. Я создал этот jsfiddle, чтобы выделить мою проблему. Я пытаюсь подсчитать, а потом пойти БУМ! Но бум идет первым, а затем обратный отсчет. Что я делаю неправильно/отсутствует?

http://jsfiddle.net/urAZ7/1/

HTML

<div ng-app="" ng-controller="Controller"> 
    <pre>{{output}}</pre> 
</div> 

JS

function Controller($scope, $q) { 
    $scope.output = "Boom Goes the Dynamite in... " 
    $scope.countdown = 10; 

    var defer = $q.defer(); 

    defer.promise 
     .then(function() { 
      var timer = setInterval(function() { 
       $scope.output+="\n " + $scope.countdown; 
       $scope.$apply(); 
       if ($scope.countdown === 0) { 
        clearInterval(timer); 
       } 
       $scope.countdown--;  
      },1000); 

      return true 
     }) 
     .then(function(data) {  
      $scope.output+="\n " + "BOOM!!!!!"; 
     }); 

    defer.resolve(); 
} 

Answer 1

Вы должны разрешить обещание только когда асинхронная операция выполняется. Таким образом, вы должны двигаться resolve в setInterval:

function Controller($scope, $q) { 
    $scope.output = "Boom Goes the Dynamite in... " 
    $scope.countdown = 10; 

    var defer = $q.defer(); 

    defer.promise.then(function() { 
     $scope.output += "\n " + "BOOM!!!!!"; 
    }); 

    var timer = setInterval(function() { 
     $scope.output += "\n " + $scope.countdown; 
     $scope.$apply(); 
     if ($scope.countdown === 0) { 
      clearInterval(timer); 
      defer.resolve(); // <--- resolve here 
     } 
     $scope.countdown--; 
    }, 1000); 

} 

http://jsfiddle.net/urAZ7/4/