Binding Angularjs select items to model using property of item

Question

I have a collection as follows:

$scope.TeamType = [
    {
        "name": "Beginner",
        "value": 0
    },
    {
        "name": "Novice",
        "value": 1
    },
    {
        "name": "Expert",
        "value": 2
    },
    {
        "name": "Masters",
        "value": 3
    }];

I also have a variable in my controller:

$scope.SelectedTeamType = 0;

I am trying to use these items in the following statement

<select ng-model="SelectedTeamType" ng-options="v as v.name for v in TeamType track by v.value"></select>

I would like the select to init with the corresponding value in the model and save the value to the model when select changes. I am not sure why the model SelectedTeamType is getting the entire object stored to it instead of the v.value and why it isnt initializing with beginner.

Answer 1

As per comment I need to keep $scope.SelectedTeamType as an integer value

Use

<select 
    ng-model="SelectedTeamType" 
    ng-options="v.value as v.name for v in TeamType"
 ></select>

DEMO

Its storing object due to expression which you have provided in ngOptions.

You need to bind object, use

$scope.SelectedTeamType = $scope.TeamType[0];

better

$scope.SelectedTeamType = $scope.TeamType.filter(function(t) {
    return t.value == 0;
});