AngularJS - Selects and ng-options

by Sajeetharan Sinnathurai

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select 
            ng-options="p.first + ' ' + p.last for p in people"
            ng-model="selectedPerson"></select>
        <select
            ng-options="p.first + ' ' + p.last group by p.actor for p in people"
            ng-model="selectedPerson"></select>
        {{ selectedPerson }}
    </fieldset>
</div>

JavaScript

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
        { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
        { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
        { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
    ];
});