AngularJS Material

<div ng-controller="AppCtrl" class="md-padding" ng-cloak>
  <div>
    <fieldset class="standard">
      <legend>Using &lt;ng-model&gt;</legend>
      <div layout-wrap layout-gt-sm="row" >
        <div flex-gt-sm="50">
          <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
            Checkbox 1: {{ data.cb1 }}
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <div>
            <md-checkbox
              ng-model="data.cb2"
              aria-label="Checkbox 2"
              ng-true-value="'yup'"
              ng-false-value="'nope'"
              class="md-warn md-align-top-left" flex>
            Checkbox 2 (md-warn)  <br/>
            <span class="ipsum">
              Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
              Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
              sit amet dapibus tortor ligula non nibh.
            </span>
            <br/>
            {{ data.cb2 }}
          </md-checkbox>
          </div>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
            Checkbox: Disabled
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
            Checkbox: Disabled, Checked
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
            Checkbox (md-primary): No Ink
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-indeterminate
              aria-label="Checkbox Indeterminate" class="md-primary">
            Checkbox: Indeterminate
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-indeterminate aria-label="Checkbox Disabled Indeterminate"
              ng-disabled="true" class="md-primary">
            Checkbox: Disabled, Indeterminate
          </md-checkbox>
        </div>
      </div>
    </fieldset>

  </div>
</div>

<div ng-controller="AppCtrl" class="md-padding demo">
  <div layout="row" layout-wrap>
    <div flex="100" layout="column">
      <div>
        <!--
          In IE, we cannot apply flex directly to <fieldset>
          @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
        -->
        <fieldset class="demo-fieldset" >
          <legend class="demo-legend">Using &lt;md-checkbox&gt; with the 'indeterminate' attribute </legend>
          <div layout="row" layout-wrap flex>
          <div flex-xs flex="50">
            <md-checkbox aria-label="Select All"
                         ng-checked="isChecked()"
                         md-indeterminate="isIndeterminate()"
                         ng-click="toggleAll()">
              <span ng-if="isChecked()">Un-</span>Select All
            </md-checkbox>
          </div>
            <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
              <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
               {{ item }}
              </md-checkbox>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
</div>