angularjs: Cannot show multiple selected items in md-select on load

I am learning to develop a web application using "Angularjs".

A web page of the application is an input form in which the user edits its profile. The input form displays existing details of the user in angular material display controls. I am using "md-select" dropdown to display hobbies of the user. However I couldn't show the existing hobbies in the "md-select" dropdown.

Following is the non-working code:

HTML:

<md-select ng-model="ctrl.exthobbies" ng-model-options="{trackBy: '$value.id'}">
    <md-option ng-repeat="n in ctrl.hobbies" ng-value="n">
      {{ n.value }}
    </md-option>
</md-select>
<p>number: {{ ctrl.exthobbies}}</p>

JS:

   _this.exthobbies= [{id: 1, value: "Reading"},{id: 6, value: "Paragliding"}];
    _this.hobbies= [
      {id: 0, value: "None"},
      {id: 1, value: "Reading"},
      {id: 2, value: "Writing"},
      {id: 3, value: "Driving"},
      {id: 4, value: "Swimming"},
      {id: 5, value: "Skating"},
      {id: 6, value: "Paragliding"},
      {id: 7, value: "Hiking"}
    ];

Please find the complete code in "Codepen" at: https://codepen.io/oiproj/pen/KKwBxoM

Question: Can the fix be figured out?

you should add multiple="true" to md-select for supporting multiple items:

<md-select multiple="true" ng-model="ctrl.exthobbies" ng-model-options="{trackBy: '$value.value'}">
    <md-option ng-repeat="n in ctrl.hobbies track by n.value" ng-value="n">
      {{ n.value }}
    </md-option>
  </md-select>