Hi rani,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
$scope.Products = [
{ Name: "Gas", Liters: 5000, Remaining: 4000 },
{ Name: "Oil", Liters: 25000, Remaining: 18000 },
{ Name: "Fuel", Liters: 15000, Remaining: 13000 }
];
for (var i = 0; i < $scope.Products.length; i++) {
$scope.Products[i].Percentage = Math.round(parseInt(100) - ((parseInt($scope.Products[i].Remaining) / parseInt($scope.Products[i].Liters)) * parseInt(100)));
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table border="1" cellpadding="1" cellspacing="1">
<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 style="width: 200px;">
<div ng-style="{'width' : '100%','background-color':'#E9E9E9' }">
<div ng-style="{'width' : product.Percentage+'%','background-color':'#337AB7','text-align': 'center' }">
<span style="color: White;">{{product.Percentage}}%</span>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Demo
