AngularDart: Including Subcomponents in a Custom Component Template

I have created a tab component in AngularDart

@Component(
    visibility: Directive.CHILDREN_VISIBILITY,
    selector: "rtabs",
    templateUrl: "packages/myapp/components/rtabs.html",
    publishAs: "cmp",
    useShadowDom: false
)
class RTabsComponent {
    @NgAttr('label')
    String label;

    int selectedTabIndex = 0;

    RTabsComponent(){
    }

    var tabs = new List<RTabComponent>();

    add(RTabComponent tab) {
        tabs.add(tab);
    }
}

@Component(
    selector: "rtab",
    template: "<content></content >",
    publishAs: "cmp",
    useShadowDom: false
)
class RTabComponent {    
    @NgAttr('name')
    String name;

    RTabComponent(RTabsComponent tabs){
        tabs.add(this);
    }
}

      

        
        
        
      

    

and my component usage is like

<rtabs label="System Settings">
    <rtab name="test">test 123</rtab>
    <rtab name="test 2">test abc</rtab>
    <rtab name="test 3"><input-custom ng-model="cmp.somevalue"></input-custom></rtab>
</rtabs>

      

        
        
        
      

    

I have a problem blurring rtab content in rtabs component template. I'm not sure what is the correct syntax for this.

If i do

<div ng-repeat="tab in cmp.tabs">
{{tab}}
</div>

      

        
        
        
      

    

It just prints out an "RTabComponent" instance, which is understandable.

But how would I loop through the cmp.tabs in the template and display the actual content of the rtab?

I need the content to work with ng-model stuff and other components like the one in the third tab.