md-select can't set selected value

Question

I have a md-select set up as follows:

Answer 1

In my case adding ng-model-options="{trackBy: '$value.id'}" as described in the docs did not work, as no initial value was set.

By explicitly setting the model to the wished default value in the controller properly set the value as desired. This approach might be easier if you do not know up front the index of the element you want to display as pre-selected (using ng-selected). Of course you can evaluate it in the controller, but to me it seems more immediate to set the target element directly to the model.

View:

<div class="input-style-border">
   <md-select ng-model="vm.selectedGlobalFilter">
       <md-option ng-value="item" ng-repeat="item in vm.globalFilterValues">
            {{item.value}}
       </md-option>
   </md-select>
</div>

Controller:

function initialize() {
        vm.globalFilterValues = globalFilterValues;
        vm.selectedGlobalFilter = TransferGlobalFilter.Worldwide;
    }

Where globalFilterValues are in the form:

[
  {key:"All", value:"All values" },
  {key:"Manager", value:"Manager"},
  {key:"HR", value:"Human resources"},
]

Answer 2

You need to use ng-model-options, trackBy and choose a unique model field as a selector:

<md-select placeholder="Category" 
    ng-model="current.Category" 
    ng-model-options="{trackBy: '$value.Id' }" // <-- unique field 'Id'
    flex >
    <md-option 
     ng-repeat="item in categories" 
     ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>

This solution is described in Angular Material's official documentation.

Answer 3

This solution is simple if you are wanting to default to the first value in the drop down.

Use the ng-select="$first". This will default the drop down to the first value.

<md-select placeholder="Categories" ng-model="current.category">
   <md-option ng-repeat="(index, item) in categories" value="{{item}}"
              ng-selected="$first">{{item.Name}}</md-option>
</md-select>

Here is a CodePen to demonstrate.

Answer 4

The documentation isn't explicit, but you should use ng-selected. I've created a codepen to illustrate, but basically:

<md-option ng-repeat="(index,item) in categories" ng-value="{{item}}"
           ng-selected="index == 1">    
    {{item.Name}}
</md-option>

This'll select the the second category (index 1 in your category array).

Answer 5

Use value in ng-option insted of ng-value

Answer 6

in order to set the default value of select you can use ng-selected and ng-model

    <md-select ng-model="vmIdPage.number">
             <md-option ng-value="mod" ng-repeat="mod in vmIdPage.initObject.listeModaliteMisePlace" ng-selected="{{ mod.id === vmIdPage.number.id ? 'true' : 'false' }}">
                {{mod.libelle}}
             </md-option>
    </md-select>