Select box in Angular adding extra blank option

Question

I have a select/drop-down box in my Angularjs app:

<select ng-model="places">
  <option value="1">London</option>
  <option value="2">Paris</option>
  <option value="3">Madrid</option>
  <option value="4">Athens</option>
</select>

but in the HTML page there is an extra blank option added above the London option. When I remove ng-model then it renders as I would expect (i.e. 4 options with London showing by default). Is this normal?

You can look at this: http://stackoverflow.com/questions/20738953/angular-js-remove-blank-option-from-select-option — jagmohan, Jun 12 '16 at 11:49

score 0 · Answer 1 · answered Jun 12 '16 at 11:48

if the value of ng-model i.e. places does not match with the option values than this extra blank option is generated and by default selected. You need to set ng-model value equals to one of the options or if you do not want any value to be selected by default create one more option with value blank

 <option value="">Select</option>

and set ng-model i.e. places to "" in the controller.

score -1 · Answer 2 · answered Jun 12 '16 at 12:24

In your case you can try this:

 var app = angular.module("Demo", []);
 app.controller("AppController", function($scope) {
   
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
  <div ng-controller="AppController">
    <select ng-model="places" ng-init="places=1">
      <option value="1">London</option>
      <option value="2">Paris</option>
      <option value="3">Madrid</option>
      <option value="4">Athens</option>
    </select>
  </div>
</div>

Hope this will help you. Thanks.

Select box in Angular adding extra blank option

2 Answers2