Jay Jay - 2 months ago 5x
AngularJS Question

AngularJS - A dropdown is not retaining the selected values

In my AngularJS web application,

Plunker : https://plnkr.co/edit/x9uIx5Inkxxt3fqttkkK?p=preview

One of my drop down (First) is not retaining the selected value.
The html code fragment is below.

I know it is something to do with the mapping ng-model="entityPropertyType.propertyId"

The entityPropertyType is a iterated value from the list.


<div class="form-group" ng-repeat="entityPropertyType in advancedSearch.entityPropertyTypes" >

<label class="control-label col-md-1">Business Card</label>
<div class="col-md-2">
<select class="form-control" ng-model="entityPropertyType.propertyId"
ng-change="businessCardSelected($index, entityPropertyType.propertyId)" >
<option value="">Please select</option>
<option ng-repeat="property in businessCards" value="{{property.propertyId}}">{{property.propertyLabel}}</option>



You should never use ngRepeat to render select options. Use ngOptions directive:

<select class="form-control" 
        ng-options="property.propertyId as property.propertyLabel for property in businessCards"
        ng-change="businessCardSelected($index, entityPropertyType.propertyId)">
    <option value="">Please select</option>

Demo: https://plnkr.co/edit/v6KbJSkqu5XNz2LUfbrK?p=preview