JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div ng-controller="AngularCtrl">
  <div my-repeater items='items'></div>
</div>

CSS

.important {
    color: red;
}

JavaScript

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});

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

myApp.directive('myRepeater', function() {
    return {
        restrict: 'A',
        template: "<div ng-repeat='item in items' ng-click='updateRating(item)' ng-class='getRatingClass(item.ratings)'>{{item.ratings}}</div>",
        scope: {
            items: '=items'
        },
        link: function(scope, element, attrs) {
            scope.updateRating = function(item){
                alert('inside update rating');
                item.ratings = item.ratings+1;
            };
        
            scope.getRatingClass = function(rating){
                if(rating > 10){
                    return 'important';
                }            
                return 'normal';
            };
       }
    };
});

function AngularCtrl($scope) {
    $scope.items = [{
        id: 1,
        ratings: 10},
    {
        id: 2,
        ratings: 20}];    
}