How to Set Rating in AngularJS

Design Code for Rating

<div ng-controller="RatingDemoCtrl" ng-app="demo" >
    <h4>Rating percentage With Color</h4>
    <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
    <span class="label" ng-class="{'label-warning': percent
        <30, 'label-info': percent>=30 && percent
            <70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%
    </span>
    <h4>Rating Out of 10</h4>
    <div ng-init="x = 4">
        <rating ng-model="x" max="10" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating>
        <b>(
            <i>Rate:</i> {{x}})
        </b>
    </div>
</div>

 

 

Rating percentage with effect

 

 

Angularjs Code for Rating

angular.module('demo', ['ui.bootstrap']);
angular.module('demo').controller('RatingDemoCtrl', function($scope) {
    $scope.rate = 7;
    $scope.max = 10;
    $scope.isReadonly = false;

    $scope.hoveringOver = function(value) {
        $scope.overStar = value;
        $scope.percent = 100 * (value / $scope.max);
    };
    $scope.ratingStates = [{
        stateOn: 'glyphicon-ok-sign',
        stateOff: 'glyphicon-ok-circle'
    }, {
        stateOn: 'glyphicon-star',
        stateOff: 'glyphicon-star-empty'
    }, {
        stateOn: 'glyphicon-heart',
        stateOff: 'glyphicon-ban-circle'
    }, {
        stateOn: 'glyphicon-heart'
    }, {
        stateOff: 'glyphicon-off'
    }];
});

Thank You