AngularJS data-ng-model仅在相同的<div>中工作

Question

来自Angular6，我正在尝试在自定义指令中进行这项工作。我有一个复选框，如果选中该复选框，则会显示下一个块，否则不会显示。

我以前从未做过angularJS，而且我真的不知道为什么仅在第一个isAlsoMagic中检测到<div>的变化。在文档中，我找不到解释，有人知道吗？

beautiful.html：

      <div ng-if="isMagicDog" class="someClass">
          <div class="formattingClass">
              <!-- display formatting -->
          </div>
          <input id="someId" type="checkbox" name="someName" data-ng-model="isAlsoMagic">
          Is he magic ? {{isAlsoMagic}}
          </input>
        <div ng-if="isAlsoMagic">
            This is working well {{isAlsoMagic}}
        </div>
      </div>

      <div ng-if="isAlsoMagic">
          This is not working, isAlsoMagic is not modified after clicking on the checkbox {{isAlsoMagic}}
      </div>

JS： 从'./beautiful.html'导入模板；

angular
  .module('magicApp')
  .directive('beautiful', function() {
    return {
      restrict: 'E',
      scope: {
        param1: '=',
        param2: '=?'
      },
      template,
      link: function(scope, elem, attr, NotBeautifulCtrl, $parent) {
        scope.param1= (scope.param1 === 'true');
        scope.param2= NotBeautifulCtrl.param2;
        scope.isMagicDog= true;
        scope.isAlsoMagic = true;
        }
    };
  });