AngularJS directive with ngTransclude not showing {{bound}} content

Question

I'm attempting to create an Angular directive that creates a standardised structure of a table that I wish to use around my application.

I want to specify the structure of the tr when I declare the directive in HTML so that I can have different layouts depending on the data that is passed in. However, I can't seem to get the content of ng-transclude to actually render.

Plunker: Example

I'd like the following:

<custom-table table="data">
  <td>
    {{row.Username}}
  </td>
  <td>
    {{row.FirstName}}
  </td>
  <td>
    {{row.LastName}}
  </td>
</custom-table>

to be injected into the within the template.

How do I get the {{row.Username}} etc tags to resolve within the ng-transclude in the angular directive?

Edit1: I think this is a similar question that I've just found, although most top voted answer seems to recommend avoid using table, tr, td etc within directives :\

Answer 1

I found a work-around which solves the problem for me.

I've updated the plunker with a working example. I had to create a directive:

app.directive('myTransclude', function() {
    return {
        compile: function(tElement, tAttrs, transclude) {
            return function(scope, iElement, iAttrs) {
                transclude(scope.$new(), function(clone) {
                    iElement.append(clone);
                });
            };
        }
    };
});

I found the issue here within the comments.

I also had to update the directive so it uses a CSS/div based table rather than using an actual HTML table.