使用<md-tabs>中每个选项卡的滑出菜单

Question

我想使用角度材料为我的应用程序构建一个滑出菜单。

我有一些标签，每个标签都有一个包含不同内容的滑出式菜单。我已通过以下方式实现了这一点：

<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"><a href="#">{{link}}</a></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>

这里的问题是，菜单滑出，只能看到标签1.如果我转到标签5并单击过滤器按钮打开该菜单，则看不到菜单滑出标签6，但是它已经滑出标签1.你可以在转到标签1时将其滑出。

如何让每个标签都可见，因为幻灯片菜单的内容取决于打开的标签？