$compile does not compile directive template with ngRepeat - angularjs

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>