Trying to get the initial value for a select element and instead of populating the value, it adds a weird string as seen in this image:

Here is the JavaScript code:

 function appCtrl($scope){

        $scope.teams = [

            {teamId: 10, teamName: 'Foo'},

            {teamId: 20, teamName: 'Bar'},

            {teamId: 30, teamName: 'Steve'},

            {teamId: 40, teamName: 'Jobs'},

            {teamId: 50, teamName: 'Macs'}

        ];



        $scope.filters = {

            teamIdSelected: 20

        };

  }

Here is the HTML:

<div ng-app ng-controller=appCtrl> 

    <select class=small ng-model=filters.teamIdSelected>

        <option ng-repeat=team in teams value={{team.teamId}}>{{team.teamName}}</option>

    </select>

Here is a jsbin to demonstrate: http://jsbin.com/EKOpAFI/1/edit

I also tried using the incredibly poorly documented select element here but I can't get it to work that way either where my teamId is the value and the teamName is the label. It always wants to put the index of the array as the value.

Any help would be greatly appreciated.