Footable3 and angularjs - angularjs

Question

I am having an issue getting footable3 working with angularjs. Everything seems to be working as expected; however, footable3 is removing any <a/> links in the table cells. Code below, but if I remove the attribute "my-footable" the links appear (inspect the table, there are <a/> links), but I can't figure out why they are removed when using the directive (inspect the table, there are no <a/> links)
I used angularjs/footable as a starting point
Here is my directive
app.directive('myFootable', function () {
return function (scope, element) {
var footableTable = element.parents('table');
if (!scope.$last) {
return false;
}
scope.$evalAsync(function () {
if (!footableTable.hasClass('footable-loaded')) {
footableTable.footable();
}
footableTable.data('__FooTable__').draw();
});
};
}
and here is my table
<table class="table footable">
<thead>
<tr>
<th>Team</th>
<th>Player</th>
<th data-breakpoints="xs sm" data-type="number">Games</th>
<th data-sorted="true" data-direction="DESC" data-type="number">Points</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in players" my-footable>
<td>{{item.teamName}}</td>
<td>{{item.playerName}}</td>
<td class="text-right">{{item.games}}</td>
<td class="text-right">{{item.points}}</td>
</tr>
</tbody>
</table>

Answer 1

got it to work by changing the directive to:
function () {
return function ($compile, scope, element) {
if (!scope.$last) {
return false;
}
var footableTable = element.parents('table');
scope.$evalAsync(function () {
if (!footableTable.hasClass('footable-loaded')) {
footableTable.footable();
}
footableTable.data('__FooTable__').draw();
$compile(element.contents())(scope);
});
};
}