Dropdown menu not populating (angular)

Question

I'm trying to make a menu where I can change the "cell" property of a person. Cells are defined as:

Cells: [
{ name: 'NE', id: 1 },
{ name: 'NW', id: 2 },
{ name: 'SE', id: 3 },
{ name: 'SW', id: 4 }
]

My html code

<div><select ng-model="ui.returnedPeopleList[row.rowIndex]" ng-options="cell for cell in Cells"></select></div>

returnedPeopleList is an array of people. Basically what I have is a grid of people. Double clicking a person opens a modal instance where you can change their properties (hence, the row.rowIndex). The row is passed to the instance modal instance, where the changes are made. I'm not sure how much of this is relevant to the dropdown; I'm pretty new to angular.

The dropdown menu is empty, and I have no idea what's wrong. Thanks in advance.

Answer 1

You need the right syntax for ng-options

ng-options="cell.id as cell.name for cell in Cells"

Will produce the following option elements:

<option value="1">NE</option>
<option value="2">NW</option>
<option value="3">SE</option>
<option value="4">SW</option>

Answer 2

One problem is that you in your ng-options. Your display value is going to be the object in the list, not the object property you want.

Try:

ng-options="cell as cell.name for cell in Cells"

Also make sure Cells is on your $scope.

Answer 3

Below code may help you <div><select ng-model="returnedPeople" ng-options="cell as cell.name for cell in Cells" ng-change="ui.addToPeopleList(returnedPeople)"></select></div>.I think ng-model is not setting the value to ui.returnedPeopleList[row.rowIndex].