Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="TestController">
    Total: {{total}}, <button ng-click="changeTotal(-1)">-</button><button ng-click="changeTotal(+1)">+</button><br/>
    Count: {{count}}, <button ng-click="changeCount(-1)">-</button><button ng-click="changeCount(+1)">+</button><br/>
    Percentage: {{count / total}}<br/>
    <br/>
    
    <progress-bar percentage="(count / total)"></progress-bar>

  </div>
</div>

CSS

.progressBar{
  width: 100%;
  height: 5px;
  background: blue;
}

.progressBar .inner{
  width: 0%;
  height: 100%;
  background: red;
}

JavaScript

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

myApp.controller('TestController', function($scope) {
    $scope.total = 20;
    $scope.count = 15;
    
    $scope.changeTotal = function(value){$scope.total += value};
    $scope.changeCount = function(value){$scope.count += value};
});

myApp.component('progressBar', {
	bindings: {
		percentage: '=',
	},
	controller: function() {
    var self = this;
	},
	template: '<div class="progressBar">\
			<div class="inner" ng-style="{ width: $ctrl.percentage * 100 +\'%\'}"></div>\
		</div>',
});