Custom table header directives not behaving as expected - angularjs

Question

I am putting together a directive that will wrap a transcluded table and will be used with another directive to prepend checkboxes to the first cell in a table row to allow for multi selections of rows, plus a header checkbox cell for toggle select\deselect-all functionality.
I have started with a table header directive, here is what I have come up with so far:
DIRECTIVES
angular
.module('app.components')
.directive('myTable', myTable);
function myTable() {
var myTable = {
restrict: 'E',
transclude: true,
scope: {
someProperty: '='
},
template: '<div class="myTable">' +
'<md-toolbar class="md-menu-toolbar">' +
'<div class="md-toolbar-tools">' +
'OTHER CONTENT HERE...'
'</div>' +
'</md-toolbar>' +
'<ng-transclude></ng-transclude>' +
'</div>',
controller: controller,
controllerAs: 'vm',
bindToController: true
};
return myTable;
function controller($attrs) {
var self = this;
self.enableMultiSelect = $attrs.multiple === '';
}
}
angular
.module('app.components')
.directive('myTableHead', myTableHead);
myTableHead.$inject = ['$compile'];
function myTableHead($compile) {
var myTableHead = {
restrict: 'A',
require: ['myTableHead', '^^myTable'],
controller: controller,
controllerAs: 'vm',
bindToController: true,
link: link
};
return myTableHead;
function link(scope, element, attrs, ctrls) {
var self = ctrls.shift(),
tableCtrl = ctrls.shift();
if(tableCtrl.enableMultiSelect){
element.children().prepend(createCheckbox());
}
self.toggleAll = function () {
console.log('toggleAll');
};
function createCheckbox() {
var checkbox = angular.element('<md-checkbox>').attr({
'aria-label': 'Select All',
'ng-click': 'vm.toggleAll()'
});
return angular.element('<th class="md-column md-checkbox-column">').append($compile(checkbox)(scope));
}
}
function controller() {
}
}
HTML
<my-table multiple>
<table>
<thead my-table-head>
<tr>
<th></th>
<th></th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="thing in things">
<td>{{thing.propA}}</td>
<td>{{thing.propB}}</td>
</tr>
</tbody>
</table>
</my-table>
I am encountering an issue where as soon as I have added the my-table-head directive to my thead element of the table being transcluded in, no rows from the ng-repeat get rendered.
The checkbox header cell does actually render just fine, but I also am finding when clicking it, the toggleAll function its bound to (defined in my link function) is not firing as I dont see any console log messages appearing.
I can't figure out why, can anyone point out what I am doing wrong with my approach above?