Angular Material Checkbox Three states

by michananya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.css">
<div ng-app="checkApp" ng-controller="mainCtrl as vm">
  <md-checkbox ng-model="vm.checkModel" ng-change="vm.checkModelChange()" aria-label="Checkbox" md-indeterminate="vm.checkModel === null">
    Checkbox Value: <b>{{ vm.checkModel == null ? 'null' : vm.checkModel}}</b>
  </md-checkbox>
</div>

JavaScript

angular.module('checkApp', ['ngMaterial'])
  .controller('mainCtrl', mainCtrl);

function mainCtrl() {
  vm = this;

  var checkValues = [false, true, null];
  var len = checkValues.length;
  var index = 0;
  vm.checkModel = checkValues[index];
  
  vm.checkModelChange = function() {
    vm.checkModel = checkValues[++index % len];
  }
}