Angular Material. How to close / hide my md-select when I close my menu?

Question

I use md-menu-itemelements in md-menu. The menu is activated by the button - everything works fine, and everything uses angular js by default.

Inside each md-menu-itemthere are entrances md-select. It looks like this:

...

<md-menu-item>
    <md-input-container>
        <label>My Label</label>
        <md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
            <md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
                {{foo.name}}
            </md-option>
        </md-select>
    </md-input-container>
</md-menu-item>

...

If I open the menu by pressing the button - If I don’t select anything and I press the button <md-select>(somewhere on the screen), it md-menuleaves, as it should, and everything is fine.

If I <md-select>click on one of the elements and then click somewhere on the screen, it <md-menu>closes, but I still see the element <md-select>.

Is there a way to "nest" items in a menu item so that when a menu item is closed, all child items are also closed?

, .

!

Answer 1

menu select , . angular . z-index . variables.scss ( , , ):

$z-index-menu: 100 !default;
$z-index-calendar-pane: 100 !default;
$z-index-select: 90 !default;

, ( z-index css).

Answer 2

md-select, . '$mdSelect.hide()' md-select. 3 .

    $(document).bind('click', function (event) {
        $mdSelect.hide();
    });