Progressbar in angular - html

Question

I want to make Progressbar in Angular.js in decimal format, simple format, times based Progressbar. Someone could pls help !
E.g.
Start Timer {{ counter }}/{{ max }} = {{ (counter/max)*100 }}%
Start Timer 20/30 = 66.66666666666666%
Here is example.js:
angular.module('plunker', ['ui.bootstrap']);
var ProgressDemoCtrl = function ($scope) {
$scope.max = 200;
$scope.random = function () {
var value = Math.floor((Math.random() * 100) + 1);
var type;
if (value < 25) {
type = 'success';
} else if (value < 50) {
type = 'info';
} else if (value < 75) {
type = 'warning';
} else {
type = 'danger';
}
$scope.showWarning = (type === 'danger' || type === 'warning');
$scope.dynamic = value;
$scope.type = type;
};
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ProgressDemoCtrl', function ($scope) {
$scope.value = 40;
$scope.state = "progress-bar-success";
$scope.myStyle = {width: $scope.value + '%'};
});
$scope.random();
$scope.randomStacked = function() { $scope.stacked = [];
var types = ['success', 'info', 'warning', 'danger']; for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) { var index = Math.floor((Math.random() * 4));
$scope.stacked.push({ value: Math.floor((Math.random() * 30) + 1),
type: types[index] }); } }; $scope.randomStacked(); };
var app = angular.module('progressApp',['nprogress']); var MainCtrl = function($scope,ngProgress){ }

Answer 1

I use this round progress ba directive, works pretty well:
http://www.youtube.com/watch?v=w2qrYL0Le24
https://github.com/angular-directives/angular-round-progress-directive
If you need a rectangular one give me a buzz I, have a custom directive implemented.
If you need two decimal numbers you only have to adjust the font size.
Test with two decimals:
Code to change (configuring ang:roundprogress directive)
data-round-progress-label-font="80pt Arial"
Whole markup
<div ang:round:progress data-round-progress-model="roundProgressData"
data-round-progress-width="500"
data-round-progress-height="500"
data-round-progress-outer-circle-width="40"
data-round-progress-inner-circle-width="10"
data-round-progress-outer-circle-radius="200"
data-round-progress-inner-circle-radius="140"
data-round-progress-label-font="80pt Arial"
data-round-progress-outer-circle-background-color="#505769"
data-round-progress-outer-circle-foreground-color="#12eeb9"
data-round-progress-inner-circle-color="#505769"
data-round-progress-label-color="#fff"></div>