Custom Directive inside a Directive using ControllerAs syntax - angularjs

Question

If I have two directives, one that's a table, and one that's a row. In this case the row is the same each time, and I just want to have it displayed twice in the index.html. <table-row> works in the index.html, but <table> does not why?
i.e.:
.directive('table', function() {
return {
restrict: 'E',
scope: {},
controller: 'table-ctrl',
controllerAs: 'ctrl',
bindToController: true,
template:`
<div>
<table-row></table-row>
<table-row></table-row>
</div>`
};
});
Table Row:
.controller('TableRowCtrl', function() {
this.toggle = function() {
this.toggleBool = !this.toggleBool;
}
//
this.toggleBool = false;
})
.directive('TableRow', function() {
return {
scope: {},
restrict: 'E',
replace: true,
controller: 'TableRowCtrl',
controllerAs: 'ctrl',
bindToController: true,
template: `
<div>
<span>Object</span>
<span>
<img ng-click="ctrl.toggle()" src="jpeg file" />
</span>
<span ng-if="ctrl.toggleBool"> Print </span>
</div>`
};
});
If table-row is the other directive that does everything and its controller is also what runs on clicks etc, how would I link in the table-row directive so that the table directive template works, and will call table-row multiple times.I would like to continue using the ControllerAs syntax instead of $scope.

Answer 1

It doesn't matter if you want to use controllerAs or not. From your code table directive has isolate scope and suppose if you want to iterate through table-row items by using ngRepeat directive it should be isolate scope as well.
Remember that every ngRepeat's item has own scope
For example:
.directive('table', function() {
return {
restrict: 'E',
scope: {},
controller: 'table-ctrl',
controllerAs: 'ctrl',
bindToController: true,
template:
<div ng-repeat="item in ctrl.items">
<table-row item="item"></table-row>
</div>`
};
});