We Keep Coding

Angular ng-options returning index instead of object value

Below is my ng options
<select ng-init="vm.tutors = vm.tutors || 0" ng-model="vm.tutors" ng-options="tutors.fullname as tutor for (tutor, fullname) in vm.tutors" class="form-control"></select>
and below is my object
vm.tutors
[Object { fullname="NAME"}, Object { fullname="NAME2"}}]
What is the reason I keep getting the index instead of the actual value

The reason you are getting the index is because you have some syntax/concept issues.
Your code looks like it needs some love so here is a decent example of the proper way to do this:
Controller:
$scope.vm.tutors = [{fullname: "NAME"}, {fullname: "NAME2"}];
$scope.vm.selectedTutor = ""; // you can assign a value if you would like to have an option preselected.
HTML:
// in this example tutor.fullname is the Label and Value for the select option.
<select ng-model="vm.selectedTutor" ng-options="tutor.fullname for tutor in vm.tutors" ></select>
Now when you select an option the value will be assigned to $scope.vm.selectedTutor and it wont break your array.
Alternatively you can setup a key value pair relationship with your select options like so:
Controller:
$scope.vm.tutors = [{fullname: "NAME", id: "0"}, {fullname: "NAME2", id:"1"}];
HTML:
// in this example tutor.id is the Value and tutor.fullname is the Label for the select option
<select ng-model="vm.selectedTutor" ng-options="tutor.id as tutor.fullname for tutor in vm.tutors" ></select>
I hope this helps you understand what is going on here a little better, also HERE is a link to the AngularJS documentation.

ng-init not setting first select options in ng-options

I have a simple select element and I am trying to initialize the value but for some reason it is failing, i.e. not taking the init value
HTML
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.display for item in possibility track by item.value"
ng-init="EventDetails.lossGainProb">
JavaScript
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = 5;

Based on the given code I have created small working demo here
<div ng-app="myApp" ng-controller="myCtrl">
<select class="select-form-control" ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility">
</select>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.possibility =[ {
display : '0%',
value : 0
}, {
display : '5%',
value : 5
}];
$scope.lossGainProb = $scope.possibility[1].value;
});

You need the tracked item for the list tracked by angular. Try this:
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = $scope.possibility.filter(function(item){ return item.value === 5})[0];
Working Codepen http://codepen.io/gpincheiraa/pen/bpbMom

There are two mistakes I see:
You are using ngInit incorrectly. It does not specify the initial binding for the ngModel directive, it is an expression which is evaluated against the scope after the scope is initialized. To specify initial model bindings, you need something like
<select ng-init="lossGainProb = EventDetails.lossGainProb"></select>
Another (better) approach is to specify this in your controller directly, like
$scope.lossGainProb = $scope.EventDetails.lossGainProb;
Your ngModel is bound to the entire "possibility" object rather than just the value property. I am assuming that you want just the value to be your model value. In this case, you should set ngOptions like
<select ng-options="item.value as item.display for item in possibility"></select>
This specifies that ngModel should be bound to item.value with item.display being used as the label.
Putting these together, your select should look like
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility"
ng-init="lossGainProb = EventDetails.lossGainProb">
</select>
Here is a working Plunker.

This will work without using ng-init - initializing in the controller:
$scope.lossGainProb = {};
$scope.lossGainProb.value = 5;
ng-init should not be used if possible - https://docs.angularjs.org/api/ng/directive/ngInit.

an alternate approach would be this one:
<select class="select-form-control" ng-init="lossGainProb = possibility[1].value" ng-model="lossGainProb" ng-options="item.value as item.display for item in possibility"> </select>

Angular: Get the index of the dropdown item

I have the following in my view
<div>
<select ng-model="obj.arr[otherObj.variable]" ng-change="otherObj.variable=SOMETHING">
<option ng-repeat="label in obj.arrs">{{label}}</option>
</select>
</div>
Without the ng-change attribute, this code does what I want when otherObj.variable is one of the indexes of the obj.arr - it selects the correct item in the list.
What I want in addition to this is to set otherObj.variable to the index of the array item that is picked when the dropdown variable is changed. So, if the second value in the dropdown is picked then otherObj.variable should be set to 1. I tried to do this with a
ng-change="otherObj.variable=SOMETHING"
Problem is., I don't know what that SOMETHING should be. Am I doing this right?
EDIT
My requirements are
Select the top option in the dropdown by default
select the appropriate item in the array depending on the value of otherObj.variable (this gets set by some external code so if I come to the page with this value set then I want the correct option selected)
Make sure otherObj.variable is updated if I change the value in the dropdown.

angular.module('selects.demo', [])
.controller('SelectCtrl', function($scope){
$scope.values = [{
id: 1,
label: 'aLabel',
}, {
id: 2,
label: 'bLabel',
}];
$scope.selectedval = $scope.values[0];
});
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="selects.demo">
<div ng-controller="SelectCtrl">
<p>Using ngOptions without select as:</p>
<select ng-model="selectedval" ng-options="value.label for value in values"></select>
<p>{{selectedval}}</p>
<p>Using ngOptions with select as statement: (this will return just the id in the model)</p>
<select ng-model="selectedval2" ng-options="value.id as value.label for value in values"></select>
<p>{{selectedval2}}</p>
</div>
</div>
Sorry if my comment was a little cryptic. Select elements like other form elements are actually directives in AngularJS, so they do a lot of stuff for you automatically. You don't need to use an ngChange to populate the ngModel associated with your select element. AngularJS will handle that for you.
Also, you can use ngOptions instead of ngRepeat on select elements to generate the values automatically on options.
Assuming that you have an object with values:
$scope.values = [{
id: 1,
label: 'aLabel',
}, {
id: 2,
label: 'bLabel',
}];
You would write:
<select ng-model="selectedval" ng-options="value.label for value in values"></select>
Now your ngModel is going to be bound to the selected element. It will be set with the value of the object that was chosen. If you add {{selectedval.id}} to your view, it will display the id of the selected element.
If you want to set the value to the first item, in your controller, you would add:
$scope.selectedval = $scope.values[0];
If you want to update some property on $scope.values based on the selected value, you could use something like:
$scope.addActiveProp = function() {
var selected = $scope.values.filter(function(e) { return e == $scope.selectedval; });
selected.active = true;
}
And then run the addActiveProp fn in ngChange on the select.

Please give a try with below code
<select ng-model="obj.arr[otherObj.variable]" ng-change="otherObj.variable=key" ng-options="key as value for (key , value) in obj.arrs"></select>

Dropdown menu not populating (angular)

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.

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>

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.

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].

how to set the ng-model to a property of an object

from this example
http://jsfiddle.net/qWzTb/
How can I set $scope.correctlySelected directly to the value on selecting in the select box and not to the entire object for e.g.
{ label: 'one', value: 1 },
So on selecting anything $scope.correctlySelected should be 1 or 2
and not the entire object
{ label: 'one', value: 1 }
or
{ label: 'two', value: 2 }

Here is a working fiddle: http://jsfiddle.net/AXHeA/
This is how you do it:
<select ng-model="selected"
ng-options="opt.value as opt.label for opt in options">
And then you can assign it like so:
$scope.selected = 2;

If I understand correctly, you want to be able to just set $scope.correctlySelected = 2;, right? If so then you just need to do this for the ng-options directive:
<select ng-model="correctlySelected" ng-options="opt.value as opt.label for opt in options">
Here's an updated fiddle: http://jsfiddle.net/qWzTb/89/