Angular: Progress Bar

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <br>
    <label>Maximum</label>
    <input name="test" ng-model="maximum"></input>
    <br>
    <label>Current</label>
    <input name="test" ng-model="current"></input>
    <br>
    <br>
    <br>
    <progress-bar maximum="maximum" current="current"></progress-bar>
</div>

CSS

.root {
    width: 800px;
    height: 800px;
}
.progress_bar {
    width: 225px;
    height: 20px;
    border: 1px solid #666666;
    background-color: white;
}
.progress_bar .progress {
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C3D5EB), color-stop(1, #60A5DE));
    background-image: -o-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: -moz-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: -webkit-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: -ms-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: linear-gradient(to bottom, #C3D5EB 0%, #60A5DE 100%);
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.current = 0;
    $scope.maximum = 100;
}

myApp.directive('progressBar', function () {
    return {
        template: "<div>play</div><div class='progress_bar' title='{{getWidth()}}'><div class='progress' style='width:{{getWidth()}}'></div></div>",
        restrict: 'E',
        controller: 'ProgressBarController',
        replace: true,
        scope: {
            maximum: '&',
            current: '&'
        }
    };
});

myApp.controller('ProgressBarController', ['$rootScope', '$scope',

function ($rootScope, $scope) {
    $scope.getWidth = function () {
        var width = '0%';
        var current = Number($scope.current());
        var maximum = Number($scope.maximum());

        if (current < 0) {
            current = 0;
        }

        if (current >= maximum) {
            width = "100%";
        } else {
            width = (current / maximum) * 100 + '%';
        }
        return width;
    };
}]);