Can we deselect all <md-tab>s when they are rendered?

Question

I have implemented tabs using angular material, in which I have md-tabs within which come the individual md-tab directives.

I have got 2 md-tab directives within md-tabs as shown below:

<md-tab label="Home">                          
    <div class="demo-tab tab{{$index%4}}" id="scrollable-tabs">
        <p>Display all the recommnedations</p>
    </div>
</md-tab>
<md-tab ng-repeat="cat in categories" 
  ng-disabled="cat.disabled"
  label="{{cat.title}}"
  md-on-select="fetchCategoryProducts(cat.id)">
    <div class="demo-tab tab{{$index%4}}" id="scrollable-tabs">
        <p>Display tab specific content</p>
    </div>
</md-tab>

As can be seen, the first md-tab is a static one. The next md-tab generates many more tabs using ng-repeat over a categories array through the controller.

The problem is, the first tab produced by ng-repeat gets automatically selected. I come to know this from fetchCategoryProducts(cat.id) which gets called automatically before me selecting that tab. I intend this function to be called only when I click on a tab.

Although, when md-tabs is rendered, the Home tab is viewed as active. Everything seems fine when I view the page. Somehow internally the first tab produced by ng-repeat is selected.

So, how can I deactivate the first tab generated by ng-repeat? Effectively, only the static tab (i.e. Home) should be active at the start and when the rest of the tabs when generated should all be deselected.

Siva Siva · Accepted Answer · 2016-02-02T11:09:20

Try adding md-active to "Home" tab to make Home tab active.

<md-tab label="Home" md-active="true">

Can we deselect all <md-tab>s when they are rendered?

1 Answers