<md-list ng-controller="ListCtrl">
  <md-subheader class="md-no-sticky">Single Action Checkboxes</md-subheader>
  <md-list-item ng-repeat="topping in toppings">
    <p> {{ topping.name }} </p>
    <md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
  <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
    <md-icon md-svg-icon="{{setting.icon}}"></md-icon>
    <p> {{ setting.name }} </p>
    <md-switch class="md-secondary" ng-model="setting.enabled"></md-switch>
  </md-list-item>
  <md-list-item ng-click="navigateTo('data usage', $event)">
    <md-icon md-svg-icon="cached"></md-icon>
    <p>Data Usage</p>
  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Checkbox with Secondary Action</md-subheader>
  <md-list-item ng-repeat="message in messages">
    <md-checkbox ng-model="message.selected"></md-checkbox>
    <p>{{message.title}}</p>
    <md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat" md-svg-icon="communication:message"></md-icon>
  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader>
  <md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name, $event)">
    <img alt="{{ person.name }}" ng-src="{{ person.img }}" class="md-avatar" />
    <p>{{ person.name }}</p>
    <md-icon md-svg-icon="communication:messenger" ng-click="doSecondaryAction($event)" aria-label="Open Chat" class="md-secondary md-hue-3" ng-class="{'md-primary': person.newMessage}"></md-icon>
  </md-list-item>
</md-list>
