Dropdown group by

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="demoApp" ng-controller="DemoController">
    <select ng-model="print_materials" 
    ng-options="material.maerial_id as material.material_name group by material.material_cat_name for material in print_materials">
        <option value=''>Select a template</option>
    </select>
</div>

JavaScript

angular.module('demoApp', []).controller('DemoController', function ($scope) {

    $scope.print_materials = [{
        material_cat_name: 'Email',
        material_id: '1',
        material_name: 'Template u1'
    }, {
        material_cat_name: 'Email',
        material_id: '2',
        material_name: 'Template u2'
    }, {
        material_cat_name: 'System',
        material_id: '3',
        material_name: 'Template s1'
    }, {
        material_cat_name: 'Email',
        material_id: '4',
        material_name: 'Template u3'
    }, {
        material_cat_name: 'System',
        material_id: '5',
        material_name: 'Template s2'
    }, {
        material_cat_name: 'System',
        material_id: '6',
        material_name: 'Template s3'
    }];
});