angular ng-repeat on select options is producing a blank option

Question

Given this angular select menu:

<select
    ng-init="selectedItem = selecteditem || items[0]"
    ng-model="selectedItem">
    <option
    ng-repeat="item in items"
    ng-selected="item.id == selectedItem.id"
    ng-value="item.id">{{item.name}}</option>
</select>

It produces the following HTML:

<select class="ng-pristine ng-valid ng-touched" ng-init="selectedItem = selecteditem || items[0]" ng-model="selectedItem">
    <option value="? object:10 ?"></option>
    <option selected="selected" value="1" class="ng-binding ng-scope" ng-repeat="item in items" ng-selected="item.id == selectedItem.id" ng-value="item.id">a</option>
    <option value="2" class="ng-binding ng-scope" ng-repeat="item in items" ng-selected="item.id == selectedItem.id" ng-value="item.id">b</option>
</select>       

I'm getting this for some reason:

    <option value="? object:10 ?"></option>

Controller:

$scope.selectedItem;
$scope.items = [
    { id: 1, name: 'Foo' },
    { id: 2, name: 'Bar' }
]

I don't know how to get rid of it.

Answer 1

To initialise your dropdown, just add this to your controller

$scope.items = [
    { id: 1, name: 'Foo' },
    { id: 2, name: 'Bar' }
];
$scope.selectedItem = $scope.items[0].id;

Your markup should just simply be:

<select ng-model="selectedItem" ng-options="item.id as item.name for item in items">
</select>