Why does AngularJS include an empty option in select?

by

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:

$scope.form.type = $scope.typeOptions[0].value;

Here is the jsFiddle: http://jsfiddle.net/MTfRD/3/

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.

More Related Contents:

  1. ng-model for “ (with directive DEMO)
  2. angular ng-bind-html and directive within it
  3. npm / yeoman install generator-angular without sudo
  4. AngularJS – convert dates in controller
  5. How to send POST in angularjs with multiple params?
  6. Get value when selected ng-option changes
  7. How do I escape curly braces for display on page when using AngularJS?
  8. Ng-click doesn’t work inside ng-repeat
  9. unsafe link in angular
  10. Custom form validation directive to compare two fields
  11. When not to use ‘track by $index’ in an AngularJS ng-repeat?
  12. Loading a mock JSON file within Karma+AngularJS test
  13. Binding variables from Service/Factory to Controllers
  14. Angularjs how to cancel resource promise when switching routes
  15. How can you limit the value from input using AngularJS?
  16. Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
  17. How to make orderby filter work on array of strings?
  18. Enable/Disable Anchor Tags using AngularJS
  19. How do i use $on in a service in angular?
  20. Illegal use of ngTransclude directive in the template
  21. AngularJS $q. Deferred queue
  22. How to set the value attribute for select options?
  23. AngularJS: How to nest applications within an angular app
  24. Call Angular Function with Jquery
  25. AngularJS – why is $apply required to properly resolve a $q promise?
  26. How to use the axios library with AngularJS
  27. $sce.trustAsResourceUrl() globally
  28. How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?
  29. Auto logout with Angularjs based on idle user
  30. Angularjs – Hide content until DOM loaded

Leave a Comment