angularjs with chained $q & promise - then.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $q, $timeout) {
  $scope.msgs = [];
  
  function one_step_promise() {
    var deferred = $q.defer();
    deferred.promise
    .then(function() {
      $scope.msgs.push('1.1');
    });
    $timeout(function() {
      deferred.resolve();
    }, 1000);
    return deferred.promise;
  }
  
  function two_step_promise() {
    var deferred = $q.defer();
    var promise = deferred.promise
    .then(function() {
      $scope.msgs.push('2.1');
    })
    .then(function() {
      $scope.msgs.push('2.2');
    });
    $timeout(function() {
      deferred.resolve();
    }, 1000);
    return promise;
  }
  
  var deferred = $q.defer();
  deferred.promise
  .then(function() {
    $scope.msgs.push(1);
  })
  .then(function() {
    return one_step_promise();
  })
  .then(function() {
    $scope.msgs.push(2);
  })
  .then(function() {
    return two_step_promise();
  })
  .then(function() {
    $scope.msgs.push(3);
  });

  deferred.resolve();
});

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <div ng-repeat="msg in msgs">{{msg}}</div>
</body>
</html>

/* Put your css in here */