select ng-options issue in angular js - angularjs

Question

I am trying to choose the leader of a team using 'select' ng-options feature.
Student object:
student{
name:String,
status : String
}
My code to select team leader is as below.
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option value="">Select leader</option>
<option value="class.team.leader">{{class.team.leader.name}}</option>
</select>
The 'select' is storing the values correctly into the appropriate model values. But, the select is not displaying the model value properly when I go to the page view. But this code is fine for saving the details.
Requirement:
if there is no value for the model, then option value="" ==> 'Select leader' is displayed by default. if else, it should display the 'class.team.student.name'
Some one please let me know where I went wrong.
Thanks.

Answer 1

HTML:
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option ng-show="!weHaveALeader" value="">Select leader</option>
<option ng-show="weHaveALeader" value="class.team.leader">{{class.team.leader.name}}</option>
</select>
JS:
$scope.weHaveALeader = false;
$scope.$watch('class.team.leader', function(new, old) {
$scope.weHaveALeader = true
}

Answer 2

You could remove the second option tag, that seems unneccessary.
I've put your code into a plunker http://plnkr.co/edit/OZCal9ZkCQeqnQJY0WP9?p=preview and it seems to work fine.
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option value="">Select leader</option>
</select>
<div><b>Team Leader:</b> {{class.team.leader}}</div>
If that isn't what you want, please give more detail of what are missing.

Answer 3

The correct method to use select ng-model is as below.
Select leader
{{class.team.leader.name}}
This has solved the issue of displaying on the page reload.