Using with nested objects in Angular Asked Sep 10 '13 at 20:02 Active Mar 14 '16 at 21:20 Viewed 6,762 times 3 0 I'd like to create an html output like this: <select> <option value="" class="">-- Choose category --</option> <optgroup label="Dogs"> <option value="0">Great Dane</option> <option value="1">Lab</option> </optgroup> <optgroup label="Cats"> <option value="2">Black</option> <option value="3">Tabby</option> </optgroup> </select> From an array like this: var animals = [{ name: 'Dogs', subcats: ['great dane', 'lab'] }, { name: 'Cats', subcats: ['tabby', 'black'] }, ]; And have the model bound to the to set 2 values, animal.type(dog or cat) and animal.subcategory. Tried a bunch of stuff... am thinking I'll need to use ng-repeat and hack it through... any help is much appreicated. javascript angularjs angularjs-ng-repeat angularjs-select2 angularjs-ng-change edited Sep 10 '13 at 20:32 Andrew Samuelsen asked Sep 10 '13 at 20:02 Andrew Samuelsen 5,325 9 47 69 Do you have any control of your data object, or does it *have* to look like that? – Problematic Sep 10 '13 at 20:09 @Problematic I have control. thanks – Andrew Samuelsen Sep 10 '13 at 20:10 3 Answers3 10 Since you can control the model, the documentation has an example here. Transform your model to look like: var animals = [ {name: "great dane", subcat: "Dogs"}, {name: "lab", subcat: "Dogs"}, {name: "tabby", subcat: "Cats"}, {name: "black", subcat: "Cats"} ]; // and put it in the $scope $scope.animals = animals; And the select would look like: <select ng-model="..." ng-options="a.name group by a.subcat for a in animals"> The selection will be the entire animal object with name and subcat properties. answered Sep 10 '13 at 21:03 Nikos Paraskevopoulos 39,514 12 85 90 This is a good answer. I created a plunk for it so you can see it in action. http://plnkr.co/edit/LqeGqg1HdOIkiMQrKn72?p=preview – jessegavin Sep 10 '13 at 21:42 Awesome, thank you. Do you know how to prepopulate the ... I tried setting $scope.animalSelection.name = 'great dane' but it didn't work. – Andrew Samuelsen Sep 11 '13 at 18:45

Answer 1

An alternative without needing to flatten your data would be to use nested ng-repeat directives as in this post.

Answer 2

<div ng-repeat="people in People">
<label>{{people.firstName}}</label>
<select>
<option ng-repeat-start="choice in people.Choices" ng-bind="choice.Name"></option>
<option ng-repeat-end ng-repeat="opt in choice.Options" ng-bind="' - ' + opt.Name"></option>
</select>
</div>

http://plnkr.co/edit/2vj4PK?p=preview