title: Nesting a directive inside of a table
body: <p>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?</p>
  
  <p>*<a href="http://jsfiddle.net/23vajLmm/1/" rel="nofollow">simple fiddle</a></p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="myController"&gt;
  &lt;table class="table"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
       &lt;th&gt;Month&lt;/th&gt;
       &lt;th&gt;Savings&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;my-directive&gt;&lt;/my-directive&gt;&lt;!--  this should be the tbody --&gt;
   &lt;tfoot&gt;
    &lt;tr&gt;
       &lt;td&gt;Sum&lt;/td&gt;
       &lt;td&gt;$180&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tfoot&gt;
  &lt;/table&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>var app = angular.module("myApp", []);
  
  app.directive("myDirective", function () {
      return {
          restrict: 'E',
          template: '&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;January&lt;/td&gt;&lt;td&gt;$100&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;February&lt;/td&gt;&lt;td&gt;$80&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;',
  
      };
  });
  </code></pre>