AngularJS: progressbar

Progress bar directive for AngularJS

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/sunny/jquery-ui.css">
<div ng-app="app" ng-controller="main">
    <div progressbar="value"></div>
    <select ng-model="value" ng-options="item as item + '%' for item in items">
        <option value="">-- Select current progress --</option>
    </select>
</div>

JavaScript

angular.module("app", [])
.controller("main", ['$scope', function($scope) {
    $scope.value = 10
    $scope.items = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}])
.directive('progressbar', [function() {
    return {
        restrict: 'A',
        scope: {
            'progress': '=progressbar'
        },
        controller: function($scope, $element, $attrs) {
            $element.progressbar({
                value: $scope.progress
            })

            $scope.$watch(function() {
                $element.progressbar({value: $scope.progress})
            })
        }
    }
}])