Implementing ng-if with ng-repeat for selected option tag in HTML and AngularJS

Question

I have a dropdown, using select and option tags with AngularJS, referencing a model, like this.

<select id="edit-location" class="" ng-model="packageLoc">
    <option ng-repeat="x in loc" value="{{ x.locationId }}">{{ x.locationLoc }} - ({{ x.locationFloor }}{{ x.locationBuilding }})</option>
</select>

This dropdown lists about seven location IDs that the user can choose from.

However, I have another model that brings up a specific location ID from another entry; this location ID will definitely be one of the location IDs that show up in the dropdown above. Call this packageSearch.locationId. This is only going to be one number.

If this location ID matches one of the location IDs in the dropdown above, I want the selected keyword to show, making the dropdown above display the location ID from my second model.

I've tried to implement this with ng-if. But I'm unsuccessful. See below:

<select id="edit-location" class="" ng-model="packageLoc">
    <option ng-repeat="x in loc" value="{{ x.locationId }}" ng-if="{{ x.locationId === packageSearch.locationId" selected>{{ x.locationLoc }} - ({{ x.locationFloor }}{{ x.locationBuilding }})</option>
</select>

How would I be able to apply the selected keyword to one of the <option> elements with AngularJS if that element's value matches another model's data?

Answer 1

Try use ng-selected:

<select id="edit-location" class="" ng-model="packageLoc">
    <option ng-repeat="x in loc"
        value="{{ x.locationId }}"
        ng-selected="x.locationId === packageSearch.locationId">
            {{ x.locationLoc }} - ({{ x.locationFloor }}{{ x.locationBuilding }})
    </option>
</select>