ng-repeat not compiling directive inside table row - html

Question

I have this table that when you click on the table row this gets "expanded"(it actually slide another table row with the table's colspan), for this I built this angular directive
app.directive('dirt', function($compile){
return{
restrict:'A',
scope:{
},
replace: true,
compile:function(element, attrs){
element.next().children().children().hide();
element.next().children().hide();
var table = element.parent().parent();
var colspan = table.find('tr:first > th').length;
console.log(table.find('tr'))
if(!attrs['compiled']){
var tr = element.next();
tr.children().attr('colspan', colspan);
$compile(tr.children());
}
element.bind('click', function(){
event.stopPropagation();
element.next().children().slideToggle();
element.next().children().children().slideToggle();
});
}
}
});
it's called dirt, and you put it in the tr which you need to click to expand the next tr
something like this
<tbody>
<tr dirt>
<td>123465</td>
<td>A123</td>
<td>7455</td>
<td>MX</td>
<td>US</td>
<td>2</td>
<td>75000</td>
<td>7500</td>
<td>784</td>
</tr>
<tr>
<td>
<div style="width:100%;min-height:1px;background-color:yellow;float:left;">
<div class="col-xs-6">
<span style="font-size:60px;">A4</span>
</div>
<div class="col-xs-6">
<span>rklgjnrkelgtjnkelrtm;lremt;lermt;lremt;lermt</span>
<br />
rlgtjknrekltrmnekltmret;reltmklertmnkelrt
<br />
klgmkldgmnjklfdngmkldfng,mdfgn,dfmgndf,g
</div>
</div>
</td>
</tr>
</tbody>
I have this The way is needed to show how this works with only one set of tr, you just need to click on the first table row to expand it
The problem here is that when I try to use ng-repeat-start and end this happens
plunkr failed
I don't know how to compiled the second row affected by the dirt directive so it can be recognized for the ng-repeat dir, hope you know something about
thanks.