angular-rating

HTML

<script src="https://use.fontawesome.com/2bd9c462bc.js"></script>
<div ng-app="myApp">
    <h3>Greetings</h3>
    <div ng-controller="MyCtrl">
        Hello, {{name}}!

        <div>Rating: {{rating}}</div>

        <input-stars ng-model="rating.value" max="5"></input-stars> 
    </div>
</div>

CSS

/* <input-star></input-star> directive */
.angular-input-stars {
	
	display: inline-block;
	padding: 0;
	padding-left: -5px;
	list-style: none;

}

.angular-input-stars > li {
		
	font-size: 17px;

	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
	
	cursor: pointer;	

}

.angular-input-stars > li .active {

		color: #FDE35E;
		text-shadow: black 0 0 1px, 0 0 1px ;	

}

.angular-input-stars > li .active.angular-input-stars-hover {
	text-shadow: black 0 0 3px;
}

JavaScript

var app = angular.module("myApp", []);

app.directive('inputStars', function () {

        var directive = {

            restrict: 'EA',
            replace: true,
            template: '<ul ng-class="listClass">' +
            '<li ng-touch="paintStars($index)" ng-mouseenter="paintStars($index, true)" ng-mouseleave="unpaintStars($index, false)" ng-repeat="item in items track by $index">' +
            '<i  ng-class="getClass($index)" ng-click="setValue($index, $event)"></i>' +
            '</li>' +
            '</ul>',
            require: 'ngModel',
            scope: true,

            link: link

        };

        return directive;

        function link(scope, element, attrs, ngModelCtrl) {

            scope.items = new Array(+attrs.max);

            var emptyIcon = attrs.iconEmpty || 'fa-star-o';
            var iconHover = attrs.iconHover || 'angular-input-stars-hover';
            var fullIcon = attrs.iconFull || 'fa-star';
            var iconBase = attrs.iconBase || 'fa fa-fw';
            scope.listClass = attrs.listClass || 'angular-input-stars';
            scope.readonly  = ! (attrs.readonly === undefined);

            ngModelCtrl.$render = function () {

                scope.last_value = ngModelCtrl.$viewValue || 0;

            };

            scope.getClass = function (index) {

                return index >= scope.last_value ? iconBase + ' ' + emptyIcon : iconBase + ' ' + fullIcon + ' active ';

            };

            scope.unpaintStars = function ($index, hover) {

                scope.paintStars(scope.last_value - 1, hover);

            };

            scope.paintStars = function ($index, hover) {

                //ignore painting, if readonly
                if (scope.readonly) {
                    return;
                }
                var items = element.find('li').find('i');

                for (var index = 0; index < items.length; index++) {

                    var $star = angular.element(items[index]);

            ...