[Solved] Populate a Dropdown list by grouping using AngularJs


Assuming the following structure for the templates :

$scope.templates = [{
    type: 'Email',
    name: 'Template u1'
}, {
    type: 'Email',
    name: 'Template u2'
}, {
    type: 'System',
    name: 'Template s1'
}, {
    type: 'Email',
    name: 'Template u3'
}, {
    type: 'System',
    name: 'Template s2'
}, {
    type: 'System',
    name: 'Template s3'
}];

If you want to group them by type in the dropdown you will declare your select element like that :

<select ng-model="template" ng-options="template.name group by template.type for template in templates">
    <option value="">Select a template</option>
</select>

Refer to this fiddle

1

solved Populate a Dropdown list by grouping using AngularJs