Precompiled templates

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div ng-app="app" ng-controller="MyController">
    <content-item ng-repeat="item in data"></content-item>
</div>

JavaScript

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));
        }
    };
});