$compile does not compile directive template with ngRepeat

Question

After hour of powergoogle I can not imagine why directive`s template does not compile.

So this is my partial view html: (see the ngRepeat)

<appheader currenttab="currentTab"></appheader>
<div class="l-c-r-panes">
    <div class="l-pane">
        <renters></renters>
    </div>
    <div class="c-pane">
        <div class="form-header" style="position: relative;">
            <input class="form-control filter-above-table" type="text" ng-model="filter.$" custom-search />
            <table ng-table="invoiceGrid" class="table" id="invoice-table">
                <tr ng-repeat="invoice in $data"
                    ng-click="invoiceGridRowClick(invoice, $data)"
                    ng-class="{'active': invoice.$selected}" invoice-info-tooltip="invoice">
                    <td class="invoice-num-column" data-title="'Счет'" sortable="'Invoice'" >{{invoice.Invoice}}</td>
                    <td data-title="'Арендатор'" sortable="'Renter'">{{invoice.Renter}}</td>
                    <td class="invoice-sum-column" data-title="'Сумма по счёту'" sortable="'InvoiceSum'">{{invoice.InvoiceSum}}</td>
                    <td class="invoice-sum-column" data-title="'Оплата (сумма)'" sortable="'PaySum'">{{invoice.PaySum}}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="r-pane">
        <tasks></tasks>
    </div>
</div>

<script type="text/ng-template" id="invoiceTooltipTemplate">
    <div ng-repeat="employee in employees">
        <div>{{employee.Post}}</div>
        <div>{{employee.Name}}</div>
        <div>{{employee.Phone}}</div>
        <div>{{employee.Info}}</div>
    <div>
</script>

And that is my invoiceInfoTooltipDirective:

//require qtip2
angular.module('invoiceModule')
    .directive('invoiceInfoTooltip', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            scope: {
                invoice: '=invoiceInfoTooltip'
            },
            link: function (scope, el, attrs) {
                if (scope.invoice) {
                    var tooltipTitle = scope.invoice.Renter;
                    var tooltipText = '';
                    scope.employees = scope.invoice.RenterInfo.Employees;
                    tooltipText = $compile($('#invoiceTooltipTemplate').html())(scope);
                    el.qtip({
                        overwrite: true,
                        content: {
                            title: tooltipTitle,
                            text: tooltipText
                        },
                        style: {
                            classes: 'qtip-light invoice-qtip c-invoice-table-tooltip'
                        },
                        show: {
                            event: 'click',
                            solo: true
                        },
                        hide: {
                            fixed: true,
                            leave: true,
                            event: null
                        },
                        position: {
                            my: 'top center',
                            target: 'mouse',
                            adjust: {
                                mouse: false
                            }
                        }
                    });
                }
            }
        };
    }]);

directive use template #invoiceTooltipTemplate located in partial view

If this template do not have ngRepate, $compile in directive works fine. But I need iterate some content in template and want to use ngRepeat.

No console errors. Nothing.

If temlate does not compile it return this jquery obj:

[comment, jquery: "2.1.1", constructor: function, selector: "", toArray: function, get: function…]
0: comment
baseURI: null
childNodes: NodeList[0]
data: " ngRepeat: employee in employees "
firstChild: null
jQuery21106483948081731796: undefined
lastChild: null
length: 33
localName: null
namespaceURI: null
nextElementSibling: div.ng-scope
nextSibling: div.ng-scope
nodeName: "#comment"
nodeType: 8
nodeValue: " ngRepeat: employee in employees "
ownerDocument: document
parentElement: null
parentNode: document-fragment
previousElementSibling: null
previousSibling: null
textContent: " ngRepeat: employee in employees "
__proto__: Comment
length: 1
__proto__: Object[0]

I had similar situation in my project, but there`re no ngTable directive with ngRepeat. And it works fine.

Answer 1

Template always must have root element. So easy mistake and I got it..

So template looks like this. And it works.

<script type="text/ng-template" id="invoiceTooltipTemplate">
<div>
    <div ng-repeat="employee in employees">
        <div>{{employee.Post}}</div>
        <div>{{employee.Name}}</div>
        <div>{{employee.Phone}}</div>
        <div>{{employee.Info}}</div>
    </div>
</div>
</script>