JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" ></div>
        </span>

    </div>
</body>

CSS

.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
}
ul.rating {
    display: inline-block;
}
.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.rating .filled {
    color: red;
}

JavaScript

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '='
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                    filled: i < scope.ratingValue
                });
            }
        }
    }
});