Nesting a directive inside of a table

Is this possible? I want the ability to tidily swap out a table body depending on user input, so i just threw this little *test together to see if it would work, but it's loading all wonky, with the body preceding and exterior to the table itself in the DOM even though I nest it appropriately in my html. so my questions are thus: 1) what's this behavior all about? and 2) can i achieve what I want the way i'm going about it?

*simple fiddle

html:

<div ng-app="myApp" ng-controller="myController">
<table class="table">
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
 </thead>
 <my-directive></my-directive><!--  this should be the tbody -->
 <tfoot>
  <tr>
     <td>Sum</td>
     <td>$180</td>
  </tr>
 </tfoot>
</table> 
</div>

js:

var app = angular.module("myApp", []);

app.directive("myDirective", function () {
    return {
        restrict: 'E',
        template: '<tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody>',

    };
});