Simplest way to Load a dropdown from a Javascript array and Set Selected value using angularjs

Question

I have a simple Javascript Array like this:

var directionArray = [{ id: 'N', text: 'North' },
    { id: 'S', text: 'South' },
{ id: 'E', text: 'East' },
{ id: 'W', text: 'West' }];

I have a select element like this:

<select data-ng-model="bbInventory.DIRECTION_OF_TRAVEL"
                name="travelDirection"
                id="travelDirection"
                class="form-control" style="width: 100%"></select>

The goal is to firstly load the options from the array and then select a value once data is available.

I am drawing a blank, any input will be much appreciated

Answer 1

A simple setup would be:

$scope.directionArray = [{ id: 'N', text: 'North' },
      { id: 'S', text: 'South' },
      { id: 'E', text: 'East' },
      { id: 'W', text: 'West' }];

And in the html:

<select data-ng-model="bbInventory.DIRECTION_OF_TRAVEL"
        ng-options="item.id as item.text for item in directionArray"
        name="travelDirection"
        id="travelDirection"
        class="form-control" style="width: 100%"></select>

See plunker.

Answer 2

use ng-options directive

<select ng-model="bbInventory.DIRECTION_OF_TRAVEL" ng-options="option.text for option in directionArray track by option.id"></select>

then to select an option use

$scope.bbInventory.DIRECTION_OF_TRAVEL = $scope.directionArray[whatyouwantindex];