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">
  <button my-repeater='{{items}}'>Click here</button>
</div>

JavaScript

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

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

myApp.directive('myRepeater', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var myTemplate = "<div>{{rating}}{{daten}}</div>";

            element.on('click', function() {
                var items = scope.$eval(attrs.myRepeater);
                console.log('length: ' + items.length);
                for (var i = 0; i < items.length; i++) {
                    var child = scope.$new(true);
                    console.log(items[i].ratings);
                    child.rating = items[i].ratings;
                    var text = $compile(myTemplate)(child);
                    element.append(text);
                    child.$apply();
                }
            });
       }
    };
});

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