Angular Material - How can I close/hide my md-select when I close my menu?
<p>I am using <code>md-menu-item</code> elements in my <code>md-menu</code>. The menu is activated by a button - all is working fine and all uses default angular js.</p>

<p>Within each <code>md-menu-item</code> I have <code>md-select</code> inputs. It looks like this:</p>

<pre><code>...

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

...
</code></pre>

<p>If I open the menu via clicking the button - If I choose nothing and I click off of the <code>&lt;md-select&gt;</code> (anywhere on screen) the <code>md-menu</code> goes away like it should &amp; all is well.</p>

<p>If I click into one of the <code>&lt;md-select&gt;</code> elements, then click somewhere in the screen, the <code>&lt;md-menu&gt;</code> closes, but I can still see the <code>&lt;md-select&gt;</code> element.</p>

<p>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?</p>

<p><a href="http://codepen.io/damonjentree/pen/yaKWyQ" rel="nofollow">Here is a codepen example</a> of what I am seeing.</p>

<p>Thank you for any suggestions!</p>