<!DOCTYPE html>
<
html
ng-app
=
"gfg"
>
<
head
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
>
// Adding Modules
angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('gfg').controller('rating', function ($scope) {
$scope.rate = 4;
$scope.max = 12;
$scope.isReadonly = false;
$scope.hov = function (value) {
$scope.over = value;
$scope.per = 100 * (value / $scope.max);
};
});
</
script
>
</
head
>
<
body
>
<
div
ng-controller
=
"rating"
>
<
div
class
=
"loumn"
>
<
span
uib-rating
ng-model
=
"rate"
max
=
"max"
read-only
=
"isReadonly"
on-hover
=
"hov(value)"
on-leave
=
"over = null"
titles
=
"['a','b','c','d','e','f','g','h','i','j','k','l']"
aria-labelledby
=
"default-rating"
>
</
span
>
<
span
class
=
"label"
ng-class="{'label-warning': per<30,
'label-info': per>=30 && per<
70
,
'label-success': per>=70}"
ng-show="over && !isReadonly">{{per}}%</
span
>
</
div
>
</
div
>
</
body
>
</
html
>