AngularJS - extra blank option added using ng-repeat in select tag
angularjs, javascript, select
Solution
Any time you see `<option value="?" selected="selected"></option>` in the select, it means that your `ng-model` is set to a value that isn't in the `ng-options`. So, if you don't want the blank option, you need to make sure `item` is set to a value in your `itemlist`. This could be as easy as having the following in your controller:
$scope.item = $scope.itemlist[0];
This will give it an inital value, and then angular will update it for you thereafter.
Problem
I have a listbox that I am creating with a select, using AngularJS ng-repeat. The listbox is created correctly, and when I select one of the items and click my button, I get to the function and have the information I need. My html code is as follows: ``` <select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select> <button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button> ``` My problem is that when the listbox paints, it has one item at the top that is blank. When I inspect the listbox during a run in Chrome, I get the following output in the console: ``` <select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid"> <option value="?" selected="selected"></option> <option value="0">Item 1</option> <option value="1">Item 2</option> <option value="2">Item 3</option> <option value="3">Item 4</option> <option value="4">Item 5</option> <option value="5">Item 6</option> </select> ``` I am wondering how I can get rid of the first option inserted by the ng-repeat. I don't want to see a blank space at the top of the listbox. I realize one option would be to set the first actual option (value="0") as the selected item, but I would rather have no selected items to start.