title: Broken nested tabs
body: <p>I have a problem when I use nested tabs. Everything looks fine if I define the <code>label</code> property on <code>md-tab</code>, but when I put a <code>&lt;template md-tab-label&gt;Nested Tab 1&lt;/template&gt;</code> it makes the parent <code>md-tab-group</code>'s first tab "Nested Tab 1" instead of "Parent Tab 1".</p>
  
  <p>How do I get around this awkward behavior? Or is this the way it is?</p>
  
  <p><code>HTML</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;md-tab-group #parentTabs&gt;
      &lt;md-tab label="Parent Tab 1"&gt;
          First Tab
          &lt;md-tab-group #childTabs&gt;
              &lt;md-tab&gt;
                  &lt;ng-template md-tab-label&gt;&lt;span (click)="tabClicked()"&gt;Nested Tab 1&lt;/span&gt; &lt;a (click)="close()"&gt;X&lt;/a&gt;&lt;/ng-template&gt;
                  Tab Content
              &lt;/md-tab&gt;
              &lt;md-tab label="Nested Tab 2"&gt;Nested Tab 2 Content&lt;/md-tab&gt;
              &lt;md-tab label="Nested Tab 3"&gt;Nested Tab 3 Content&lt;/md-tab&gt;
          &lt;/md-tab-group&gt;
      &lt;/md-tab&gt;
  
      &lt;md-tab label="Parent Tab 2"&gt;
          Second Tab
      &lt;/md-tab&gt;
      &lt;md-tab label="Parent Tab 3"&gt;
          Third Tab
      &lt;/md-tab&gt;
  &lt;/md-tab-group&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/jzY0CcPw1iMWj39BdpoQ?p=preview" rel="nofollow noreferrer">Plunkr demonstrating the issue</a></p>
  
  <p>Notice how Nested Tab 1 appears on the first parent tab...</p>