How to make selected option show first in options?

Question

I am using Material in AngularJs. And I have noticed that when ng-model has a value which lies after a few options, the select opens above the wanted place. Is there any way to fix that? Here is a link to refer: https://codepen.io/Haris2301/pen/PoGZQqz

<md-input-container>
      <label>State</label>
      <md-select ng-model="ctrl.userState">
        <md-option><em>None</em></md-option>
        <md-option ng-repeat="state in ctrl.states" ng-value="state.abbrev" ng-disabled="$index === 1">
          {{state.abbrev}}
        </md-option>
      </md-select>
    </md-input-container>

Notice when you select an option lying somewhere in the middle and again option the md-select, it opens more upwards.