JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<div ng-app="app">total
    <input type="text" ng-model="myTotal"></input>current
    <input type="text" ng-model="myCurrent"></input>
    <br/>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" progressbar total="myTotal" current="myCurrent"> <span class="sr-only">10% Complete (warning)</span>

        </div></div>
</div>

JavaScript

var module = angular.module("app", []);

module.directive("progressbar", function () {
    return {
        restrict: "A",
        scope: {
            total: "=",
            current: "="
        },
        link: function (scope, element) {

            scope.$watch("current", function (value) {
                element.css("width", scope.current / scope.total * 100 + "%");
            });
            scope.$watch("total", function (value) {
                element.css("width", scope.current / scope.total * 100 + "%");
            })
        }
    };
});