Use directive in ng-repeat of a table - angularjs

Question

I want to create a customized row with two rows. One visible and another one collapsed.
This is my table:
<table class="table table-bordered panel panel-default centered">
<thead class="panel-heading">
<tr>
<td>..</td>
<td>..</td>
<td>.. GENERALE</td>
<td>..</td>
</tr>
</thead>
<tbody>
<table-row ng-repeat="(sottotarget,pubblicazione) in gestTrt.treat.pubblicazioni" sottotarget="sottotarget"></table-row>
</tbody>
</table>
My directive is:
<tr>
<td>
<div class="collapse navbar-collapse">
<a ng-click="tableRow.rowVar = !tableRow.rowVar" role="button"><span class="glyphicon glyphicon-plus-sign"></span></a>
</div>
</td>
<td>{{tableRow.sottotarget}}</td>
<td></td>
<td></td>
</tr>
<tr class="collapsed" ng-class="{'collapse' : !tableRow.rowVar}"><td><div>Should be collapsed</div></td></tr>
With the js code:
export function tableRow(): angular.IDirective {
return {
restrict: 'E',
scope: {
sottotarget: '=sottotarget'
},
templateUrl: '...',
controller: TableRowController,
controllerAs: 'tableRow',
bindToController: true
};
}
export class TableRowController {
public rowVar = false;
}
But in my page I visualize the two directives and then the empty table.

Answer 1

<div ng-app="" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>

Answer 2

I resolved using
<tbody ng-repeat="(sottotarget,pubblicazione) in gestTrt.treat.pubblicazioni">
<tr>
<td>
<div class="collapse navbar-collapse" ng-init="collapsed = true">
<a ng-click="collapsed = !collapsed" role="button"><span class="glyphicon glyphicon-plus-sign"></span></a>
</div>
</td>
<td>{{tableRow.sottotarget}}</td>
<td></td>
<td></td>
</tr>
<tr class="collapsed" ng-class="{'collapse' : collapsed}">
<td colspan="4"><div>Should be collapsed</div></td>
</tr>
</tbody>