JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-controller="fessCntrl">
    <span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span>

    <div class="progress-bar progress-bar-warning"
    role="progressbar" 
    aria-valuenow="10"
    aria-valuemin="0"
    aria-valuemax="100" 
    ng-style="percentageStyle">
        <span class="sr-only">10% Complete (warning)</span>
    </div>
</div>

JavaScript

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope,$timeout) {
    $scope.total = 254.78;
    $scope.threshold = 15000;
    

    $scope.getPercentage = function () {
        return (($scope.total * 100) / $scope.threshold).toFixed(2);
    }
    $scope.getTotal = function () {
        return $scope.total;
    }
    
    $scope.percentageStyle = {
       width : $scope.getPercentage() + '%'     
    };
        
    $scope.increase = function(){
    $timeout(function(){
        $scope.total +=1;
        console.log(1);
        $scope.increase();
        
    }, 200);
    
    
    };
    
 $scope.increase();    

});

fessmodule.$inject = ['$scope'];