Using a slide-out menu for each tab in <md-tabs> - angularjs

Question

I want to built a slide out menu for my application using angular material.
I have certain tabs, each of which will have a slide-out menu with different content. I have implemented this in the following manner:
<md-tab ng-repeat="tab in categories"
ng-disabled="tab.disabled"
label="{{tab.title}}"
md-on-select="setArray(tab.title,0)">
<!--Include a dropdown of sub-categories here -->
<div layout="row">
<md-menu id="sub-cat-button">
<md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="Open sample menu">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</md-button>
<md-menu-content width=6>
<md-menu-item ng-repeat="sub_cat in tab.sub_cat">
<md-button ng-click="setArray(sub_cat,1)">{{sub_cat}}</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<ol class="breadcrumb" id="breadcrumb">
<li ng-repeat="link in bread">{{link}}</li>
</ol>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button ng-click="openRightMenu()">
<i class="material-icons">keyboard_arrow_right</i>
</md-button>
</md-sidenav>
<md-content>
<md-button ng-click="openRightMenu()">
<span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
</md-button>
</md-content>
</div>
<div class="demo-tab tab{{$index%4}}" id="scrollable-tabs">
<div class="row" infinite-scroll="loadMore()" infinite-scroll-disabled="busy">
<div ng-repeat="p in products">
<h3><div class="well">{{p.id}}</div></h3>
</div>
</div>
<div ng-show="busy">Loading more products....</div>
<br/>
</div>
</md-tab>
The problem here is that, the menu slides out and can be seen only for tab 1. If I go to tab 5 and click on the filter button to open that menu, the menu is not seen slid out with tab 6 , but it has been already slid out for tab 1. you can view it slide out when you go to tab 1.
How do I make it visible for each tab, because the content of the slide out menu is dependent on the tab which is opened?