窗口大小调整时，值不应用于Ng-Class

Question

我有以下控制器：

function PlansController($scope) {

  var vm = this;
  vm.plan = null;  

  vm.show = function (plan) {
    vm.plan = plan;
  }

  $scope.$on("match", function (event, mq) {                 
    if (mq === "mobile") {
      vm.plan = "free";
      console.log(vm.plan);
    }          
  });

})();

当媒体查询“screen and（max-width：31.9375em）”匹配时，$ scope。$ on match会触发。然后我有以下内容：

<table class="plans" data-ng-class="vm.plan">

当我加载宽度与媒体查询匹配的页面时，我可以看到vm.plan类已应用于表格...

问题是以大宽度打开页面时。当我将它调整为mobil时，我在控制台中看到vm.plan变为“free”，因此Match条件触发并定义了vm.plan，但CSS类没有应用于表。

更新

我刚在https://jsfiddle.net/g3wzayp3/11/

中添加了一个示例

只需增加HTML预览窗格，当宽度与媒体查询匹配时，您将在控制台上看到值“true”但该类未应用于文本...

知道为什么吗？