<md-select ng-model="selection" placeholder="Select an Option">
<md-optgroup label="{{currentGroup}}" ng-repeat="currentGroup in groupList">
<md-option ng-value="item" ng-repeat="item in items | filter: {group: currentGroup}">{{item.name}}</md-option>
</md-optgroup>
</md-select>
app.controller('MainCtrl', function($scope) {
$scope.desc = "Angularjs md-select multiple md-optgroup";
$scope.items = [{
name: 'SFTP',
group: 'Text File'
}, {
name: 'FTP',
group: 'Text File'
}, {
name: 'MYSQL',
group: 'RDBMS'
}, {
name: 'Oracle',
group: 'RDBMS'
}, {
name: 'Sybase',
group: 'RDBMS'
},
{
name: 'DB2',
group: 'RDBMS'
}];
// Here I'm just calculating the groups when the controller runs
// You would probably want to use a $watch if you expected the list to change
$scope.groupList = $scope.items.reduce(function(previous, current) {
if (previous.indexOf(current.group) === -1) {
previous.push(current.group);
}
//console.log(previous);
return previous;
}, []);
});
Reference :- http://plnkr.co/edit/ApuUq7V88ad6uplKjKSC?p=preview&preview