Angular Material Checkbox Three states

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.5/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.5/angular-material.css">
<div ng-app="checkApp" ng-controller="mainCtrl as vm">
  <md-checkbox ng-model="vm.checkModel" ng-change="vm.checkModelChange()" ng-class="{'null': vm.checkModel == null}">
    Checkbox Value: <b>{{ vm.checkModel == null ? 'null' : vm.checkModel}}</b>
  </md-checkbox>
</div>

CSS

md-checkbox.null .md-container::before {
  content: '-';
  left: 4px;
  font-weight: bold;
  font-size: 34px;
  top: -12px;
  transition: none !important;
}

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];
  }
}