Angular md-select in md-dialog - angularjs

Question

I am using a md-select in a md-dialog. The drop down content has a scroll bar but I need the window to scroll.
Here is my code:
Dialog (in script element):
<md-dialog aria-label="Mango (Fruit)">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Click Select menu and then scroll the page</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content" layout="row" layout-align="center">
<md-input-container flex="80">
<label>Selcet your option</label>
<md-select ng-model="size">
<md-option value="option 1">option 1</md-option>
<md-option value="option 2">option 2</md-option>
<md-option value="option 3">option 3</md-option>
</md-select>
</md-input-container>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
More on Wikipedia
</md-button>
<span flex></span>
<md-button ng-click="answer('not useful')">
Not Useful
</md-button>
<md-button ng-click="answer('useful')">
Useful
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
The issue is that the content of the md-select is moving along with the scrolling. Can anyone suggest me a fix for this issue? I need both the window and md-select content to scroll.Thanks in advance.
Codepen