tristate checkbox angular js directive not working in IE 11

Question

I took the solution from this post to implement a tristate checkbox. It works on chrome/firefox but not IE (specifically using IE 11). Could someone tell me why http://jsfiddle.net/xJhEG/25/ works on all browsers but fails on IE?

var myApp = angular.module('myApp',[]);
/**
 * Directive for an indeterminate (tri-state) checkbox.
 * Based on the examples at https://stackoverflow.com/questions/12648466/how-can-i-get-angular-js-checkboxes-with-select-unselect-all-functionality-and-i
 */

myApp
  .directive('indeterminate', [function() {
    console.log("funct called!");
    return {
      require: '?ngModel',
      link: function(scope, el, attrs, ctrl) {        
        ctrl.$formatters = [];
        ctrl.$parsers = [];
        ctrl.$render = function() {
          var d = ctrl.$viewValue;
          el.data('checked', d);
          console.log("d = " + d);
          switch(d){
          case true:
            el.prop('indeterminate', false);
            el.prop('checked', true);
            break;
          case false:
            el.prop('indeterminate', false);
            el.prop('checked', false);
            break;
          default:
            el.prop('indeterminate', true);
          }
        };
        el.bind('click', function() {
          var d;
          switch(el.data('checked')){
          case false:
            console.log("f -> t");
            d = true;
            break;
          case true:
            console.log("t -> n");
            d = null;
            break;
          default:
            console.log("n -> f");
            d = false;
          }
          ctrl.$setViewValue(d);
          scope.$apply(ctrl.$render);
        });
      }
    };
  }])

function MyCtrl($scope) {
    $scope.state = true;
}