AngularJS data-ng-model works only in the same

Question

Coming from Angular6, I am trying to make this work in a custom directive. I have a checkbox, if the checkbox is checked it displays the next block otherwise it does not.

I never did angularJS before and I really have no idea why isAlsoMagic changes is only detected in the first <div>. Going through the doc I could not find the explanation, any one knows ?

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 : import template from './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;
        }
    };
  });