Create a list without ngRepeat - angularjs

Question

I would like to create a directive, that does not need ngRepeat, because there is some additional functionality on the directive, that doesn't play good with ngRrepeat.
This is my directive with ng-repeat:
<div>
<ul>
<li ng-repeat="item in items track by $index" ng-class="attrs.itemTheme" data-item="{{ item[attrs.itemId]}}">
<div ng-include="attrs.tpl"></div>
</li>
</ul>
</div>
attrs.tpl, nt-dimension is another directive, that uses the items values from ngRepeat:
<script type="text/ng-template" id="dimension-item-tpl.html">
<div nt-dimension x-attrs="item"></div>
</script>
Without ngRepeat:
<div>
<ul></ul>
</div>
Can some please give me an example, I am quit struggling with this.
Example of code:
http://jsfiddle.net/mato75/4zhLtjbw/
Not working example:
http://jsfiddle.net/mato75/ztLhpf2g/
Got to compile and append the ngIncluded template, but the problem is, that it compiles only the last one, because the digest cycle is to slow.
var el = jqElm.find('ul');
scope.attrs.list.forEach(function (vl) {
var tmp =
'<li class="' + attrs.itemTheme + '" data-item="' + vl.id + '">' +
'<div ng-include="\'' + attrs.itemTpl + '\'"></div>' +
'</li>';
scope.item = vl; // this is to slow :(
var b = $compile(tmp)(scope);
el.append(b);
});

Answer 1

You need to manually create an own scope for each li, so each item has its own data.
var ul = jqElm.find('ul');
scope.list.forEach(function (vl) {
var li = '<li><div ng-include="\'item-tpl2.html\'"></div></li>';
var newScope = scope.$new();
newScope.item = vl;
var cLi = $compile(li)(newScope);
ul.append(cLi);