No underline on active link with multiple <md-tab-group>

Bug, feature request, or proposal:

Bug Plunk: https://plnkr.co/edit/qyKDATOdTb0msRnYjbbe?p=preview (thanks @julianobrasil)

Use multiple <md-tab> and <md-tab-group> imbricated => lost the underline on active <md-tab>

This is an example:

<div fxLayoutWrap fxLayoutGap="10px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center start">
  <md-tab-group class="header-tab-admin" fxFlex="75">
    <md-tab label="{{'COMMONS.FAMILY.FAMILY' | translate}}"></md-tab>
    <md-tab label="{{'COMMONS.USER.USER' | translate}}"></md-card>
    
    <md-tab label="{{'COMMONS.HOS.HOS' | translate}}"> // I select this tab
      <md-tab-group class="header-tab-2-sub-admin">
        <md-tab label="{{'COMMONS.SEARCH2' | translate}}"> // Here NO UNDERLINE COLOR UNTIL I CLICK ON IT
        </md-tab>
        <md-tab label="{{'COMMONS.CREATE2' | translate}}"></md-tab>
      </md-tab-group>
    </md-tab>
  </md-tab-group>
</div>

Picture:

What is the expected behavior?

An underline on the active item <md-tab>

What is the current behavior?

No underline for the active tab. See the snippet code mentioned before.

What is the use-case or motivation for changing an existing behavior?

I need to have two <md-tab> and <md-tab-group> imbricated for my needs

Maybe I don’t use them correctly. I let you to say me about it.

Thank you in advance

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3 OS: Windows 7 Pro 64 bits TS: 2.4.1 Material: 2.0.0-beta.11 Browser: Chrome V60

Is there anything else we should know?

Nothing else

[BeatriceThalo]

A workaround: whenever the outer mat-tab-group changes its selectedIndex to unhide your inner mat-tab-group, call window.dispatchEvent(new Event('resize'));

[Roman-Simik]

4 years, 4 years, 4 years and still no fix -_-