Populate A Dropdown List By Grouping Using AngularJs

I have a dropdown list which is used for holding Email Templates . Now , I have categorized this into two types of Templates . One is 'User Generated Templates' and other 'System G

Solution 1:

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