Why does AngularJS include an empty option in select?
Asked 07 September, 2021
Viewed 3.1K times
  • 59
Votes

I've been working with AngularJS for the last few weeks, and the one thing which is really bothering me is that even after trying all permutations or the configuration defined in the specification at http://docs.angularjs.org/api/ng.directive:select, I still get an empty option as the first child of select element.

Here's the Jade:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

Here the controller:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

Finally, here's the HTML which gets generated:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

What do I need to do to get rid of it?

P.S.: Things work without this as well, but it just looks odd if you use select2 without multiple selection.

26 Answer