javascript - Angular select tag with options and object comparison -

javascript - Angular select tag with options and object comparison -

i'm trying set <select> tag pre-selected value. unfortunately, can't utilize ng-options directive because ui-select2 module doesn't back upwards it.

here's illustration (or, as plunker if prefer):

// controller $scope.colors = [{ name: 'blue', }, { name: 'red', }, { name: 'green' }]; $scope.selectedcolor = $scope.colors[0]; <!-- html --> <select ng-model="selectedcolor"> <option ng-repeat="color in colors" value="{{color}}">{{color.name}}</option> </select>

in instance expect angular realise $scope.selectedcolor same object first color object , preselect correctly doesn't appear work.

i can solve problem using ng-options or comparing name neither of these solutions ideal.

how can correctly compare objects in angular selects?

i found illustration online seemed utilize ng-options ui-select2 , seems work fine require. see plunker here.

html

<select ui-select2 ng-model="selectedcolor" ng-options="color.name color in colors"> </select>

controller

$scope.colors = [ { name: 'blue', }, { name: 'red', }, { name: 'green' }]; $scope.selectedcolor = $scope.colors[1];

javascript angularjs