Rating directive that will take care of visualising a star rating bar.

{{percent}}%
Rate: {{rate}} - Readonly is: {{isReadonly}} - Hovering over: {{overStar || "none"}}

Custom icons

(Rate: {{x}})
(Rate: {{y}})

Ratings are created using the rating element like below:

<div ng-init="x = 5" class="mb10"><rating class="rating" ng-model="x" max="15" state-on="'fa-check-circle'" state-off="'fa-check-circle-o'"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
(Rate: {{x}})

NOTE No JS used!