Precompiled templates strange effect - angularjs

Question

I am testing idea of dynamically changing templates. I ended with sample code that oversimplifies
whole process just to show the problem:
<div ng-app="app" ng-controller="MyController">
<content-item ng-repeat="item in data"></content-item>
</div>
and JS:
var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
$scope.data = ["heading1", "heading2"];
});
app.directive('contentItem', function ($compile) {
var templates = [
'<h1>{{item}}</h1>',
'<h4>{{item}}</h4>'];
var compiledTemplates = [];
for (var i = 0, ii = templates.length; i < ii; i++) {
compiledTemplates.push($compile(templates[i]));
}
return {
restrict: "E",
replace: true,
link: function (scope, element, attrs) {
var template = templates[0];
var link = $compile(template);
//var link = compiledTemplates[0];
element.append(link(scope));
}
};
});
Hardcoded is number of template (0) just to simplify the code and compiledTemplates array is not used (next sample will use it)
Effect the whole list of elements is rendered:
heading1
heading2
OK. But I want to pre-compile the templates so compile process doesnt happen each time link function is called.
So, If I use compiledTemplates I just need to comment first to lines in link function and uncomment fird line (comment in code above). In the end link function looks this time :
link: function (scope, element, attrs) {
var link = compiledTemplates[0];
element.append(link(scope));
}
Not much of a difference (at least I cannot see the difference), but effect is :
heading 2
(if we have 10 items in list only last one would be rendered)
Why? What am I missing?
Here is JSFiddle: http://jsfiddle.net/yoorek/DcaVM/

Answer 1

Maybe what I'm saying is wrong but ng-repeat is a special directive. It won't compile each item.
Read here in the documentation about the compiler
ngRepeat works by preventing the compilation process from descending
into the LI element so it can make a clone of the original and
handle inserting and removing DOM nodes itself.
Instead the ngRepeat directive compiles LI separately. The result of
the LI element compilation is a linking function which contains all
of the directives contained in the LI element, ready to be attached
to a specific clone of the LI element.
At runtime the ngRepeat watches the expression and as items are added
to the array it clones the LI element, creates a new scope for the
cloned LI element and calls the link function on the cloned LI.
I hope that will help!