angular-material-npfixed/src/components/select/demoOptionGroups/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="SelectOptGroupController" class="md-padding" ng-cloak>
  <div>
    <h1 class="md-title">Pick your pizza below</h1>
    <div layout="row">
      <md-input-container style="margin-right: 10px;">
        <label>Size</label>
        <md-select ng-model="size">
          <md-option ng-repeat="size in sizes" value="{{size}}">{{size}}</md-option>
        </md-select>
      </md-input-container>
      <md-input-container>
        <label>Topping</label>
        <md-select ng-model="selectedToppings" multiple>
          <md-optgroup label="Meats">
            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
          </md-optgroup>
          <md-optgroup label="Veggies">
            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
          </md-optgroup>
        </md-select>
      </md-input-container>
    </div>
    <p ng-if="selectedToppings">You ordered a {{size.toLowerCase()}} pizza with
    {{printSelectedToppings()}}.</p>
  </div>
</div>