$timeout, $q Sample

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.18" data-semver="1.2.18" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="appName" ng-controller="MainCtrl">
    <h1>$timeout Sample</h1>
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <p><button ng-click="clickHandler()" ng-show="showButton">Start Promises</button></p>
  </body>

</html>

(function () {
    angular.module('appName', [], function() {});
    angular.module('appName').controller('MainCtrl', function($scope, $q, $timeout) {

        var t = function() {
            var fn = function() {
                var s = 'getTime() : ' + new Date().getTime();
                $scope.items.push(s);
            };
            return $timeout(fn, 1000);
        };

        var startPromises = function () {
            $scope.showButton = false;
            $scope.items = ['Promises start!!'];

            var p1 = t();
            var p2 = p1.then(t);
            var p3 = p2.then(t);
            var p4 = p3.then(t);
            var p5 = p4.then(t);

            $q.all([p1, p2, p3, p4, p5]).then(
                function() {
                    $scope.items.push('Promises complete!! ＼(^o^)／ ');
                    $scope.showButton = true;
                }
            );
        };

        $scope.clickHandler = function() {
            startPromises();
        };
        
        $scope.showButton = true;

    });
}());