How to add the percentage value label to jquery-ui Progress bar in angular JS?

Question

I have used this progress bar in one of my projects. How can I add a label which shows the value percentage on the progress bar?

jsfiddle

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})
            })
        }
    }
}])


<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>

Answer 1

check updated jsfidle using this + CSS you can display percentage value on progress bar

Code as below

<div ng-app="app" ng-controller="main">
    <div class="progress" progressbar="value"><span>{{value}} %</span></div>
    <br>
    <select ng-model="value" ng-options="item as item + '%' for item in items">
        <option value="">-- Select current progress --</option>
    </select>
</div>

And CSS style

.progress{
  text-align:center;
}
.progress span{
  position:absolute;
}