Dangerous combination of replace, isolated scope and ng-if on root element in AngularJS 1.3.x

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <style>
      .test--red {
        background-color: red;
      }
      
      .test--blue {
        background-color: skyblue;
      }
      
      .test--margins {
        margin: 1rem;
      }
    </style>
    
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    
    <script>
      var app = angular.module('plunker', []);

      app.controller('MainCtrl', function($scope) {
        $scope.name = 'World';
        $scope.class = 'test--red';
      });
      
      
      // scope: {}
      // replace: true
      // no ng-if on root element
      app.directive('firstTest', function () {
        return {
          restrict: 'E',
          scope: {},
          replace: true,
          controller: function ($scope) {
            $scope.class = 'test--blue';
          },
          template: `
            <div class="test--margins {{class}}">
              <div>First Test</div>
              <div>This one will use directive scope</div>
            </div>
          `
        };
      });
      
      // scope: {}
      // replace: true
      // ng-if on root element
      app.directive('secondTest', function () {
        return {
          restrict: 'E',
          scope: {},
          replace: true,
          controller: function ($scope) {
            $scope.class = 'test--blue';
          },
          template: `
            <div class="test--margins {{class}}" ng-if="true == true">
              <div>Second Test</div>
              <div>When we will use ng-if on root element, we use external scope</div>
            </div>
          `
        };
      });
      
      // scope: {}
      // replace: false
      // ng-if on root element
      app.directive('thirdTest', function () {
        return {
          restrict: 'E',
          scope: {},
          replace: false,
          controller: function ($scope) {
            $scope.class = 'test--blue';
          },
          template: `
            <div class="test--margins {{class}}" ng-if="true == true">
              <div>Third Test</div>
              <div>When we change replace to true, everything is back to normal</div>
            </div>
          `
        };
      });
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <first-test></first-test>
    <second-test></second-test>
    <third-test></third-test>
  </body>

</html>