Angularjs md-select not set placeholder

Question

Following code of <md-select/> not showing any placeholder even when i added a placeholder="Select Type"

<md-select ng-model="ctrl.number" ng-model-options="{trackBy: '$value.id'}" placeholder="Select Type">
    <md-option ng-repeat="n in ctrl.numbers" ng-value="n">
      {{ n.value }}
    </md-option>
</md-select>

But it will work with below code

  <md-select ng-model="ctrl.number"  placeholder="Select Type">
    <md-select-label>{{ ctrl.number.value }}</md-select-label>
    <md-option ng-repeat="n in ctrl.numbers" ng-value="n">{{ n.value }}</md-option>
  </md-select>

JS Code

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('AppCtrl', function() {
        var _this = this;

        _this.number = {id: 2, value: "Two"};
        _this.numbers = [
          {id: 0, value: "Zero"},
          {id: 1, value: "One"},
          {id: 2, value: "Two"},
          {id: 3, value: "Three"},
          {id: 4, value: "Four"},
          {id: 5, value: "Five"}
        ];
      });
})();

Can someone please let me know what is wrong with first and how to set placeholder in that case ?

Answer 1

<md-select ng-model="ctrl.number" ng-model-options="{trackBy: '$value.id'}" 
placeholder="Select Type">
<md-option value="">Select Type</md-option>
<md-option ng-repeat="n in ctrl.numbers" ng-value="n">
  {{ n.value }}
</md-option>`
</md-select>

Your code works fine. Placeholder displays when not selected. You should add "md-option value="" to unselect.