dhruvdutt/app.js

## app.js
var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $q) {
    $scope.text = '';
    $scope.chain = false;
    $scope.progressbars = [];
    $scope.useQ = false;
    var count = 1;
    var currentPromise = null;

    var defer = function() {
        return $scope.useQ ? Q.defer() : $q.defer();
    };

    var getPromise = function(forceFailure) {
        var deferred = defer();
        var count = 1;
        var timeoutID = setInterval(function() {
            deferred.notify(count++);
            if (count > 10) {
                clearInterval(timeoutID);
                if (forceFailure) {
                    deferred.reject();
                }
                else {
                    deferred.resolve();
                }
            }
        }, 100 + Math.floor((Math.random() * 500)));

        return deferred.promise;
    };

    var printPromise = function(id, forceFailure) {
        return getPromise(forceFailure).then(function() {
            $scope.text += 'Success: ' + id + '\n';
        }, function() {
            $scope.text += 'Failed:  ' + id + '\n';
            throw new Error(id + ' Failed');
        });
    };

    var connectProgressBar = function(bar, promise) {
        var removeBar = function() {
            var index = $scope.progressbars.indexOf(bar);
            if (index >= 0) {
                $scope.progressbars.splice(index, 1);
            }
        };

        return promise.then(null, null, function(progress) {
            bar.message = (progress / 10 * 100) + '%';
            bar.progress = progress;
        }).finally(removeBar);
    };

    var addProgressBar = function(id, type) {
        var bar = {id: id, progress: 0, message: 'waiting', type: type};
        $scope.progressbars.push(bar);
        return bar;
    };

    var addPromise = function(forceFailure) {
        var type = forceFailure ? 'danger' : 'success';
        var bar = addProgressBar(count, type);
        var promise = printPromise(count++, forceFailure);
        return connectProgressBar(bar, promise);
    };

    var addChainedPromise = function(forceFailure) {
        var oldCount = count++;
        var type = forceFailure ? 'danger' : 'success';
        var bar = addProgressBar(oldCount, type);

        return function() {
            var promise = printPromise(oldCount, forceFailure);
            return connectProgressBar(bar, promise);
        };
    };

    $scope.launchPromise = function(forceFailure) {
        if ($scope.chained && currentPromise) {
            currentPromise = currentPromise.then(addChainedPromise(forceFailure));
        }
        else {
            currentPromise = addPromise(forceFailure);
        }
    };

    $scope.clear = function() {
        currentPromise = null;
        $scope.progressbars.length = 0;
        count = 1;
        $scope.text = '';
    };
});

## index.com
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="http://getbootstrap.com" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.3.0-beta.5/angular.js" data-semver="1.3.0-beta.5"></script>
    <script data-require="angular-ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <script data-require="q.js@1.0.0" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="spacing">
      <div class="btn-group">
        <label class="btn btn-primary" ng-model="useQ" btn-radio="false">$q</label>
        <label class="btn btn-primary" ng-model="useQ" btn-radio="true">Q</label>
      </div>
      Chained: <input type="checkbox" ng-model="chained" />
    </div>
    <div class="spacing">
      <button ng-click="launchPromise()">Success</button>
      <button ng-click="launchPromise(true)">Fail</button>
      <button ng-click="clear()">Clear</button>
    </div>
    <div class="spacing">
      <textarea ng-model="text"></textarea>
    </div>
    <div ng-repeat="bar in progressbars">
      <progressbar max="10" value="bar.progress" type="{{bar.type}}">
        <span style="color:black; white-space:nowrap;">{{bar.id}}: {{bar.message}}</span>
      </progressbar>
    </div>
  </body>

</html>
	var app = angular.module('plunker', ['ui.bootstrap']);

	app.controller('MainCtrl', function($scope, $q) {
	$scope.text = '';
	$scope.chain = false;
	$scope.progressbars = [];
	$scope.useQ = false;
	var count = 1;
	var currentPromise = null;

	var defer = function() {
	return $scope.useQ ? Q.defer() : $q.defer();
	};

	var getPromise = function(forceFailure) {
	var deferred = defer();
	var count = 1;
	var timeoutID = setInterval(function() {
	deferred.notify(count++);
	if (count > 10) {
	clearInterval(timeoutID);
	if (forceFailure) {
	deferred.reject();
	}
	else {
	deferred.resolve();
	}
	}
	}, 100 + Math.floor((Math.random() * 500)));

	return deferred.promise;
	};

	var printPromise = function(id, forceFailure) {
	return getPromise(forceFailure).then(function() {
	$scope.text += 'Success: ' + id + '\n';
	}, function() {
	$scope.text += 'Failed: ' + id + '\n';
	throw new Error(id + ' Failed');
	});
	};

	var connectProgressBar = function(bar, promise) {
	var removeBar = function() {
	var index = $scope.progressbars.indexOf(bar);
	if (index >= 0) {
	$scope.progressbars.splice(index, 1);
	}
	};

	return promise.then(null, null, function(progress) {
	bar.message = (progress / 10 * 100) + '%';
	bar.progress = progress;
	}).finally(removeBar);
	};

	var addProgressBar = function(id, type) {
	var bar = {id: id, progress: 0, message: 'waiting', type: type};
	$scope.progressbars.push(bar);
	return bar;
	};

	var addPromise = function(forceFailure) {
	var type = forceFailure ? 'danger' : 'success';
	var bar = addProgressBar(count, type);
	var promise = printPromise(count++, forceFailure);
	return connectProgressBar(bar, promise);
	};

	var addChainedPromise = function(forceFailure) {
	var oldCount = count++;
	var type = forceFailure ? 'danger' : 'success';
	var bar = addProgressBar(oldCount, type);

	return function() {
	var promise = printPromise(oldCount, forceFailure);
	return connectProgressBar(bar, promise);
	};
	};

	$scope.launchPromise = function(forceFailure) {
	if ($scope.chained && currentPromise) {
	currentPromise = currentPromise.then(addChainedPromise(forceFailure));
	}
	else {
	currentPromise = addPromise(forceFailure);
	}
	};

	$scope.clear = function() {
	currentPromise = null;
	$scope.progressbars.length = 0;
	count = 1;
	$scope.text = '';
	};
	});
	<!DOCTYPE html>
	<html ng-app="plunker">

	<head>
	<meta charset="utf-8" />
	<title>AngularJS Plunker</title>
	<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="http://getbootstrap.com" />
	<script>document.write('<base href="' + document.location + '" />');</script>
	<link rel="stylesheet" href="style.css" />
	<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.3.0-beta.5/angular.js" data-semver="1.3.0-beta.5"></script>
	<script data-require="angular-ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
	<script data-require="q.js@1.0.0" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.min.js"></script>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
	<script src="app.js"></script>
	</head>

	<body ng-controller="MainCtrl">
	<div class="spacing">
	<div class="btn-group">
	<label class="btn btn-primary" ng-model="useQ" btn-radio="false">$q</label>
	<label class="btn btn-primary" ng-model="useQ" btn-radio="true">Q</label>
	</div>
	Chained: <input type="checkbox" ng-model="chained" />
	</div>
	<div class="spacing">
	<button ng-click="launchPromise()">Success</button>
	<button ng-click="launchPromise(true)">Fail</button>
	<button ng-click="clear()">Clear</button>
	</div>
	<div class="spacing">
	<textarea ng-model="text"></textarea>
	</div>
	<div ng-repeat="bar in progressbars">
	<progressbar max="10" value="bar.progress" type="{{bar.type}}">
	<span style="color:black; white-space:nowrap;">{{bar.id}}: {{bar.message}}</span>
	</progressbar>
	</div>
	</body>

	</html>