AngularJS Web Application Development Cookbook

Working with <select> and ngOptions

AngularJS provides an ngOptions directive to populate the <select> elements in your application. Although this is at first glance a trivial matter, ngOptions utilizes a convoluted comprehension_expression that can populate the dropdown from a data object in a variety of ways.

Getting ready

Assume that your application is as follows:

(app.js) angular.module('myApp', []) .controller('Ctrl', function($scope) { $scope.players = [ { number: 17, name: 'Alshon', position: 'WR' }, { number: 15, name: 'Brandon', position: 'WR' }, { number: 22, name: 'Matt', position: 'RB' }, { number: 83, name: 'Martellus', position: 'TE' }, { number: 6, name: 'Jay', position: 'QB' } ]; $scope.team = { '3B': { number: 9, name: 'Brandon' ...