AngularJS: Why There is an Empty Option in Select Element

The empty option is generated when a value referenced by ng-model doesn’t exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don’t want to decide model value on its own.

If you want to get rid of the empty option just select an initial value in your controller, something like:

Here is the jsFiddle:

In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.

If you want an initial value, see @pkozlowski.opensource’s answer, which FYI can also be implemented in the view (rather than in the controller) using ng-init:

If you don’t want an initial value, “a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent null or “not selected” option”:


Leave a Reply

Your email address will not be published. Required fields are marked *