Tutorial: Why Angular Dropdown Automatically Adds an Empty Value

Angular Select Has an Empty Value

Often, I'm faced with this problem while implementing a select (dropdown) in Angular. Here, I have tried to walk through why Angular adds an empty value at the beginning of your select list.

Let’s start you have code like this.

<select class="form-control" ng-model="selectedName_noinit" ng-options="employee.id as employee.name for employee in employees"></select>

$scope.employees is defined as an array in a .js file that has the properties id and name.

This might generate something like:

<select class="form-control" ng-model="selectedName_noinit" ng-options="employee.id as employee.name for employee in employees">
 <option value="?" selected="selected"></option>
 <option value="0">Name1</option>
 <option value="1">Name2</option>
 <option value="2">Name3</option>
</select>

The question arises: Why do we get an option with a value and no text inside?

It’s because your model, selectedName, isn’t initialized with a valid value or, in this case, isn’t initialized at all. In order to not select a default actual value, Angular generates an empty option and selects it by default

How to Fix This

There are two ways to fix such common issues

For example:

<select class="form-control" ng-model="selectedName" ng-options="employee.id as employee.name for employee in employees" ng-init=""></select>

In this code, we specify an initial value for selectedName. On the ng-init we assign the value 0 as selected value for the dropdown.

<select class="form-control" ng-model="selectedName" ng-options="employee.id as employee.name for employee in employees" ng-init="">
 <option value="0" selected="selected">Name1</option>
 <option value="1">Name2</option>
 <option value="2">Name3</option>
</select>

Or, we can use the following line of JavaScript:

$scope.selectedName = 0;

We can define the initial value of selectedNamein the controller, so it will generate this:

<select class="form-control" ng-model="selectedName" ng-options="employee.id as employee.name for employee in employees">
 <option value="0" selected="selected">Name1</option>
 <option value="1">Name2</option>
 <option value="2">Name3</option>
</select>

Note that ng-initallows functions. So you could call a function, initSelect(), which could wait for another value to initialize selectedName.

You can find a JSFiddle link for this article here and can play with the code.

Happy coding!

If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.