How to Set Rating in AngularJS

Design Code for Rating
  1. <div ng-controller="RatingDemoCtrl" ng-app="demo" >  
  2.     <h4>Rating percentage With Color</h4>  
  3.     <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>  
  4.     <span class="label" ng-class="{'label-warning': percent  
  5.         <30, 'label-info': percent>=30 && percent  
  6.             <70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%  
  7.     </span>  
  8.     <h4>Rating Out of 10</h4>  
  9.     <div ng-init="x = 4">  
  10.         <rating ng-model="x" max="10" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating>  
  11.         <b>(  
  12.             <i>Rate:</i> {{x}})  
  13.         </b>  
  14.     </div>  
  15. </div>  
 
 
Rating percentage with effect
 
 
Angularjs Code for Rating
  1. angular.module('demo', ['ui.bootstrap']);  
  2. angular.module('demo').controller('RatingDemoCtrl'function($scope) {  
  3.     $scope.rate = 7;  
  4.     $scope.max = 10;  
  5.     $scope.isReadonly = false;  
  6.   
  7.     $scope.hoveringOver = function(value) {  
  8.         $scope.overStar = value;  
  9.         $scope.percent = 100 * (value / $scope.max);  
  10.     };  
  11.     $scope.ratingStates = [{  
  12.         stateOn: 'glyphicon-ok-sign',  
  13.         stateOff: 'glyphicon-ok-circle'  
  14.     }, {  
  15.         stateOn: 'glyphicon-star',  
  16.         stateOff: 'glyphicon-star-empty'  
  17.     }, {  
  18.         stateOn: 'glyphicon-heart',  
  19.         stateOff: 'glyphicon-ban-circle'  
  20.     }, {  
  21.         stateOn: 'glyphicon-heart'  
  22.     }, {  
  23.         stateOff: 'glyphicon-off'  
  24.     }];  
  25. });  
Thank You