code: 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
  	};
  }
docs: <bar color="blue" caption="Is my progress.." progress="number" total="max" />