How to pre-select default options in <select “multiple”> element using AngularJS

Question

I have an object param that has these properties:

param.ValidValues (key-value array)

param.DefaultValues (values string array)

I need to bind ng-model="param.DefaultValues" and make all default values to be pre-selected in that select listbox, so that when a user makes multiple selection, the selected values are added to param.DefaultValues array

This code does the job well, please see the screenshot

<select multiple ng-model="param.DefaultValues">
    <option ng-repeat="item in param.ValidValues" value="{{item.Value}}" label="{{item.Key}}"></option>
</select>

However, the items, those values are in param.DefaultValues are not pre-selected by default .

How can I achive that? Thanks

If I use ng-options instead, it also does not pre-select DefaultValues, and also doesnt add user selected values to DefaulValues array:

<select ng-model="param.DefaultValues" ng-options="o.Value as o.Key for o in param.ValidValues" multiple>
    <option value=""></option>
</select>

Answer 1

Take a look what values you are using to populate your default values

I use ng-options because it has a better performance

Check this example, I updated a few minutes ago. Please click here

I hope this will be useful for you.