problem with selecting an option using ng-select as ng-model value is different

Viewed 55
<select ng-if="(field.Type == 'select') && (field.Value == '')" 
        name="SpecialFields_{{::field.FieldID}}"
        id="SpecialFields_{{::field.FieldID}}"
        ng-model="vmpUserObj.specialfields[field.FieldID]"
        class="form-control" >
    <option ng-selected = "{{item.defaultChoice == 1}}"
            ng-repeat = "item in field.FieldOptions"
            value = "{{item.OptionID}}">
        {{item.OptionLabel}}
    </option>

I cant make one option selected by default . Event though the particular option's ng-selected attribute is true, it is not showing as selected. Please help

2 Answers

Don't use double curly bracket interpolation with the ng-selected directive:

<select ng-if="(field.Type == 'select') && (field.Value == '')" 
        name="SpecialFields_{{::field.FieldID}}"
        id="SpecialFields_{{::field.FieldID}}"
        ng-model="vmpUserObj.specialfields[field.FieldID]"
        class="form-control" >
    ̶<̶o̶p̶t̶i̶o̶n̶ ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶"̶{̶{̶i̶t̶e̶m̶.̶d̶e̶f̶a̶u̶l̶t̶C̶h̶o̶i̶c̶e̶ ̶=̶=̶ ̶1̶}̶}̶"̶
    <option ng-selected = "item.defaultChoice == 1"
            ng-repeat = "item in field.FieldOptions"
            value = "{{item.OptionID}}">
        {{item.OptionLabel}}
    </option>

The double curly bracket interpolation ({{ }}) converts the boolean expression to a string. With JavaScript, non-empty strings are truthy.

From the Docs:

A special directive is necessary because we cannot use interpolation inside the selected attribute.

For more information, see

instead of ng-select add a ng-init directive with select tag and initialize the default model value

Related