元素高度观察器在angular指令内部无法正常工作？

Question

     <div ng-app="app" ng-controller="myCtrl" style="border:1px solid;height:300px;width:100%">
       <my-movie>
          Movie Title :
       </my-movie>
     </div>

  <script>
    var app = angular.module('app', []);
    app.controller('myCtrl', function($scope) {
      $scope.movies = ['Ice Age', 'Frozen'];
    });
    app.directive('myMovie', function() {
      return {
        restrict: 'E',
        template: '<h1>affaw</h1>',
        link: function(scope, element, attr) {
          scope.$watch(function() {   //<--not triggering
            return element[0].parentElement.clientWidth;
          }, function(newValue, oldValue) {

         if(newValue!=oldValue){
            alert("Newvalue - " + newValue + "- Old value - " + oldValue);
          }

          }, true);

        }
      };
    });
      </script>

这最初仅在页面首次加载后才开始工作，即使宽度正在变化（调整窗口大小以改变其宽度）这也不起作用。所以，我想看看只调用一次。所以我试过{{ 1}}但是发生了错误$scope.apply我猜问题是关于范围的，任何人都可以说我哪里出错了？

预期的行为：每当div的宽度发生变化（调整窗口大小以改变其宽度）时，它都会在alert中显示旧值和新值。

Demo here