title: Material Design Select option within a Select Dropdown
body: <p>I want to use <a href="https://material.angularjs.org/latest/#/demo/material.components.select" rel="nofollow">select dropdown</a> of the AngularJs Material Design library inside a select dropdown. The problem I face is When i select the inner dropdown the list is displayed Outside the content . </p>
  
  <pre><code> &lt;md-select placeholder="Pick" ng-model="someVal"&gt;
       &lt;md-option value="1"&gt;Profile&lt;/md-option&gt;
       &lt;md-select placeholder="Pick" ng-model="someVal"&gt;
          &lt;md-option value="3"&gt;sub header&lt;/md-option&gt;
       &lt;/md-select&gt;
       &lt;md-option value="7"&gt;LogOut&lt;/md-option&gt;
   &lt;/md-select&gt;
  </code></pre>
  
  <p>here i if i want to place another Select dropdown within the parent Dropdown , instance like the code above ? </p>
  
  <p>When i click the sub select the list is displayed out of the content box. Here is an example from codepen demonstrating the issue:</p>
  
  <p><a href="http://codepen.io/sstorie/pen/vOyGga" rel="nofollow">http://codepen.io/sstorie/pen/vOyGga</a></p>