Angular material separate md-tabs body

Question

I'm using angular material (https://material.angularjs.org/)

Is there a way to separate a tabs body from the tab list? I couldn't find any mention of this in the documentation.

Currently I have something like this, I need to move md-tab-body outside of md-tabs. Preferably without use of states or controller show/hide logic.

<md-tabs>
<md-tab>
    <md-tab-label>First tab</md-tab-label>
    <md-tab-body>
        <p>First tabs content.</p>
    </md-tab-body>
</md-tab>
<md-tab>
    <md-tab-label>Second tab</md-tab-label>
    <md-tab-body>
        <p>Second tabs content.</p>
    </md-tab-body>
</md-tab>

Answer 1

This isn't currently possible, but there may be different solutions depending on your use-case.

Option 1

The md-tab-body is optional, so you can use md-tabs to only handle the tab bar, and manually handle your tab content elsewhere, bound to the same selected index used by md-tabs.

Option 2

A lot of people want this functionality so that the tab bar can be a part of md-toolbar. This can be achieved by putting the md-tabs element directly after the md-toolbar, as demonstrated here: http://codepen.io/robertmesserle/pen/LVxzNW