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

Question

I am using md-menu-item elements in my md-menu. The menu is activated by a button - all is working fine and all uses default angular js.

Within each md-menu-item I have md-select inputs. 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 via clicking the button - If I choose nothing and I click off of the <md-select> (anywhere on screen) the md-menu goes away like it should & all is well.

If I click into one of the <md-select> elements, then click somewhere in the screen, the <md-menu> closes, but I can still see the <md-select> element.

Is there a way to "nest" select elements within a menu item so that when I close the menu item, all child elements also close?

Here is a codepen example of what I am seeing.

Thank you for any suggestions!

Answer 1

To hide md-select when you click outside the box . I am using '$mdSelect.hide()' to close md-select dropdown menu. I just put following 3 lines in my main controller.

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