Hi rani,
Using ui.bootstrap.progressbar i have created the example.
for more details on ui.bootstrap.progressbar refer https://angular-ui.github.io/bootstrap/.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Progress Percentage in AngularJS</title>
<style type="text/css">
.progress
{
height: 1.5em !important;
background-color: rgba(153, 153, 153, 1) !important;
}
.progress-bar
{
transition: width 1s ease-in-out !important;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-animate.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js"></script>
<script type="text/javascript" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
var app = angular.module('MyApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('MyController', function ($scope, $timeout) {
$scope.Products = [{ Name: "Gas", Liters: 5000, Remaining: 4000 },
{ Name: "Oil", Liters: 25000, Remaining: 5000 },
{ Name: "Fuel", Liters: 15000, Remaining: 10000 }
]
for (var i = 0; i < $scope.Products.length; i++) {
var value = Math.round(parseInt(100) - ((parseInt($scope.Products[i].Remaining) / parseInt($scope.Products[i].Liters)) * parseInt(100))); ;
var type;
if (value < 25) {
type = 'danger';
} else if (value < 50) {
type = 'warning';
} else if (value < 75) {
type = 'info';
} else {
type = 'success';
}
$scope.Products[i].Percentage = value;
$scope.Products[i].Type = type;
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Liters</th>
<th>Remaining</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="product in Products">
<td>{{product.Name}}</td>
<td>{{product.Liters}}</td>
<td>{{product.Remaining}}</td>
<td><uib-progressbar animate="false" value="product.Percentage" type="{{product.Type}}"><b>{{product.Percentage}}%</b></uib-progressbar></td>
</tr>
</table>
</div>
</body>
</html>
Demo
