AngularJS: ng-selected doesn't show selected value

Question

As on the title my select doesn't seem able to show the selected value, that is for instance, correctly selected...

<md-input-container flex>
    <label>Anno selezione</label>
    <md-select name="annoSelect" ng-model="vm.anno_attuale"
               ng-value="vm.progetto.pprs[$index].anno"
               ng-selected="item.selected" >
         <md-option ng-repeat="item in vm.progetto.pprs" >
           {{vm.progetto.pprs[$index].anno}}
         </md-option>
    </md-select> 
</md-input-container>

I tried with some solutions found on stack, such as that one: Angular : ng-select does not show ng-selected value

but any of them didn't fix the issue... Any idea?

Answer 1

From the Docs:

Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.

— AngularJS ng-selected Directive API Reference

The ng-value directive is in the wrong place:

<md-input-container flex>
    <label>Anno selezione</label>
    <md-select name="annoSelect" ng-model="vm.anno_attuale"
               ̶n̶g̶-̶v̶a̶l̶u̶e̶=̶"̶v̶m̶.̶p̶r̶o̶g̶e̶t̶t̶o̶.̶p̶p̶r̶s̶[̶$̶i̶n̶d̶e̶x̶]̶.̶a̶n̶n̶o̶"̶                 
               ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶i̶t̶e̶m̶.̶s̶e̶l̶e̶c̶t̶e̶d̶"̶ ̶  >
         <md-option ng-repeat="item in vm.progetto.pprs" 
                    ng-value="item.anno">
           ̶{̶{̶v̶m̶.̶p̶r̶o̶g̶e̶t̶t̶o̶.̶p̶p̶r̶s̶[̶$̶i̶n̶d̶e̶x̶]̶.̶a̶n̶n̶o̶}̶}̶
           {{item.anno}}
         </md-option>
    </md-select> 
</md-input-container>

For more information, see Using ngValue to bind the model to an array of objects

Answer 2

You need to move The ng-selected from the <select> element to the <option> element

The ng-selected directive sets the selected attribute of an <option> element in a <select> list.

ng-selected - AngularJS Doc

In your particular case it appears you have more than one problem going on in your code. ng-value and ng-selected directives belong with the <md-options> element. Also you need to choose a strategy, if you use ng-model and ng-value then you shouldn't use ng-selected.

Your code should look something like this:

<md-input-container flex>
<label>Anno selezione</label>
<md-select name="annoSelect" ng-model="vm.anno_attuale">
<md-option ng-repeat="item in vm.progetto.pprs" ng-value="vm.progetto.pprs[$index].anno">{{vm.progetto.pprs[$index].anno}}</md-option>
</md-select>
</md-input-container>

Also I would double check your ng-model and ng-value to make sure you're getting the values you think you are. Take a look here at the official AngularJS Material mdSelect Docs. There is an example very similar to yours. It should help get you on your way!