Select with ng-options and array as value

Question

I have the following array:

$scope.array = [{value: ['a'], name: 'A'}, {value: ['a', 'b'], name: 'A/B'}, {value: ['a', 'b', 'c'], name: 'ABC' }];

And I want to add a select to my html loading the data from the array. The point is that I want to put as a value of the option, the value of the key value but it's not selecting the default option properly.

<select class="form-control" ng-options="element as element.name for element in array track by element.value" ng-model="form.element"></select>

The object that I use for the ng-model looks like this when I initiate the application:

$scope.form = {element: ['a'], otherField: 'test'}

So it should select the first element of the array as default value but it's not working.

You can find the fiddle here: Fiddle

Answer 1

The option box needs to contain the item that you are attempting to select. Since you are putting reference objects into the option box, then your your option box must contain an item with the same reference as the item you wish to have selected by default.

I have updated the JS in fiddle

Here is the new JS

function Controller($scope) {
    $scope.array = [{value: ['a'], name: 'A'}, {value: ['a', 'b'], name: 'A/B'}, {value: ['a', 'b', 'c'], name: 'ABC' }];

    $scope.form = {element: $scope.array[0]}
}