lib/bar.js
function f(prex) {
	var template = '<div class="' + prex + '-progress-bar">\n\t<span class="caption" ng-transclude></span>\n\t<div class="bar {{cls}}"></div>\n</div>';
	return {
		restrict: 'E',
		replace: true,
		transclude: true,
		scope: {
			'color': '&color',
			'caption': '&title',
			'progress': '&progress'
		},
		link: function link(scope, ele, attr, ctrl) {
			var total = parseInt(attr.total) || 100;
			var bar = angular.element(ele.children()[1]);
			scope.$watch(scope.progress, function (value) {
				return bar.css({ 'width': Number(value) * 100 / total + '%' });
			});
			scope.$watch(scope.color, function (value) {
				return scope.cls = value;
			});
		},

		template: template
	};
}
function f(prex) {
	var template = '<div class="' + prex + '-progress-bar">\n\t<span class="caption" ng-transclude></span>\n\t<div class="bar {{cls}}"></div>\n</div>';
	return {
		restrict: 'E',
		replace: true,
		transclude: true,
		scope: {
			'color': '&color',
			'caption': '&title',
			'progress': '&progress'
		},
		link: function link(scope, ele, attr, ctrl) {
			var total = parseInt(attr.total) || 100;
			var bar = angular.element(ele.children()[1]);
			scope.$watch(scope.progress, function (value) {
				return bar.css({ 'width': Number(value) * 100 / total + '%' });
			});
			scope.$watch(scope.color, function (value) {
				return scope.cls = value;
			});
		},

		template: template
	};
}
<bar color="blue" caption="Is my progress.." progress="number" total="max" />