Edit in JSFiddle

var app = angular.module('app', []);
app.controller('MyController', function($scope, $q, $timeout){
    
    $scope.promises = [];
    var d = $q.defer();
    var promise = d.promise;
    
    /*
    for (var i = 0; i < 10; i++) {
        (function(n) {
            promise = promise.then(function(data){
                var d = $q.defer();
                console.log(data);
                $timeout(function(){
                    return d.resolve('done' + n);
                }, 2000);
                
                return d.promise;
            });
        })(i);
    }
    */
    
    for (var i = 0; i < 10; i++) {
        
        promise = promise.then((function(n){
            return function(data) {
                var time = Math.floor(5000 * Math.random());
                var d = $q.defer();
                console.log(data);
                $timeout(function(){
                    $scope.promises.push(data);
                    return d.resolve('done: ' + n + ' time: '+ time);
                }, time);
                    
                return d.promise;
            }
        })(i));
    }
    
    d.resolve('start');
    
    /*
    var promise =　d.promise.then(function(data) {
        console.log(data);
        
        var d = $q.defer();
        
        $timeout(function(){
            return d.resolve('done 3');
        }, 2000);
        
        return d.promise;
    })
    .then(function(data) {
        console.log(data);
        
        return 'done 4';
    })
    .then(function(data) {
        var d = $q.defer();
        
        $timeout(function(){
            return d.resolve('done 5');
        }, 1000);
        
        return d.promise;
    })
    .then(function(data) {
        console.log(data);
        
        return 'done 6';
    })
    .then(function(data) {
        console.log(data);
        
        return 'done 7';
    });
    */
    
    
    
});

<div ng-app="app">
    <div ng-controller="MyController">
        <ul>
            <li ng-repeat="value in promises">{{$index}} : {{value}}</li>
        </ul>
    </div>
</div>

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<style>