Angular ng-options for bounded select elements


I’m almost there but stuck on one little detail. I can’t seem to get the “name” property of the selected Car Make’s “Car Model” to actually show up on the select menu. At the moment, it seems to be showing the correct number of options, but the options are visibly BLANK. Here’s my code to help better explain…

$scope.carMakes = [
        name: 'Honda',
        models: [{name:'Accord'}, {name: 'Civic'}, {name: 'CRX'}]
        name: 'Toyota',
        models: [{name:'Camry'}, {name: 'Forerunner'}]

   <div class="input-group">
        <label>Vehicle Make</label>
        <select id="carMake" ng-model="carMake" ng-options="carMake as for carMake in carMakes track by">
            <option value="">All</option>
    <div class="input-group carModels">
        <label>Vehicle Model</label>
        <select id="carModel" ng-model="carMake.model" ng-options="carMake.model as for carMake in carMake.models">
            <option value="">All</option>

Can someone please tell me why even though the carModel select options show up, the “name” isn’t being displayed? Thank you!


You want something like this:

<select id="carModel" ng-model="carMake.model" ng-options="carModel as for carModel in carMake.models">
    <option value="">All</option>

We’re using as the display and setting the value as the object itself. So in your controller, $scope.carMake.model will be equal to the model object. So if the user selects “Accord” then in your controller:

$ === 'Accord' // True

would evaluate to true after the selection is made.

Answered By – Nicholas Thomson

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published