AngularJS table rows with directive

I’m trying to get a table to render with angularjs directives.
The output I desire is to have child tr and th inside a tbody

<table>
  <thead>
    <tr>COL 1</tr>
    <tr>COL 2</tr>
    <th col="2">Title 1</th>
  </thead>
  <tbody ng-repeat="i in [1, 2, 3, 4]">
    <tr>
      <td>i.name</td>
      <td>i.value</td>
    </tr>
    <tr></tr>
  </tbody>
</table>

For the above table, I have some child content that should appear below any tr. The child content has th and tr’s (the th content should appear only once above the list of its tr elements). And those child tr’s can again have children. You get the point.

Here’s what I’ve tried and observed.

I’ve used a custom attribute directive on the tr element.

app.directive('customDirective', ['$compile', function($compile){
  return {
    restrict: 'A',
    scope: {
      content: '='
    },
    link: function(scope, element) {
      // SOME LOGIC TO DECIDE IF THE TEMPLATE NEEDS TO BE RENDERED TO STOP MAX EXECUTION ERROR
      var template = '<tbody>
                        <th col="2">Title 1.1</th>
                        <tr custom-directive>
                          <td>content.name</td>
                          <td></td>
                        </tr>
                      </tbody>';
      element.parent().after($compile(template)(scope));
    }
  }
}]);

First issue: I’m having to use the tbody tag the second time only to use the CSS properties; I’m not sure why it isn’t retaining the properties of the table.

Second issue: The second level child (Title 1.1.1) isn’t rendering at all and there are no console errors.

Source: AngularJS