ng-model in dropdown is not working when 2 items starts with the same word

Question

I have a listbox with several items, some of them starting with the same word.
Seems to me that if I try to use the ng-model to set the selected item using a value black the row isn't selected.
Seems to me the sample is correct. Am I missing something?

$scope.colors = [
  {name:'black', shade:'dark'},
  {name:'black 2', shade:'dark'},
  {name:'white', shade:'light'},
  {name:'red', shade:'dark'},
  {name:'blue', shade:'dark'},
  {name:'yellow', shade:'light'}
];
$scope.myColor = 'black'; // red

I created here a repro

Answer 1

In your ng-options you are setting the value to the object, but in your controller you are setting it to a string.

You should do:

$scope.myColor = $scope.colors[0]; //black

Answer 2

Your ng-options are incomplete. You are changing the label of how thing appear in the dropdown, but you did not change the way the object is data bound to your other variable. Specifically, you are using the

label for value in array syntax, when you might be looking for the

select as label for value in array which will let you databind to the object property instead of the entire object itself.

So your ng-options would look like ng-options="color.name as color.name for color in colors"

I've forked your plunk here

Answer 3

your colors is an array of objects but your mycolor seem to be a string. Look at this. how to use ng-option to set default value of select element