Angularjs Directive to add overlay and html (with controller) from template

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.model = { name: 'World' };
    $scope.name = "Quentin";
    $scope.testFromController = {parent:'Hello World First'};
});

app.controller('TestCtrl1', function($scope) {
    console.log('test1');
    $scope.testFromController.controller = 'Hello World Second';
    $scope.testClick = function(){
        alert('test');
    }
});
app.controller('TestCtrl2', function($scope) {
    $scope.testFromController.controller2 = 'Hello World Third';
});

app.directive('testdirective', function($compile) {
  return {
    restrict: 'A',
        link: function($scope, elem, attr, ctrl) {

            $scope.testfn = function(id){
                var overlay = $('<div class="overlay"></div>');
                overlay.appendTo(document.body);

                var test2 = angular.element('<div class="elementAdded2" ng-controller="TestCtrl1" ng-include src="\'test2.html\'">Added</div>');
                test2 = $compile(test2)($scope);
                test2.appendTo(document.body);
                
                overlay.on('click',function(){
                    overlay.remove();
                    test2.remove();
                })
            }
        }
    }
});


app.directive('testdirective2', function($compile) {
    return {
        restrict: 'E',
        link: function($scope, elem, attr, ctrl) {
            var test = angular.element('<div class="elementAdded" ng-include src="\'test1.html\'" ng-controller="TestCtrl2">Added</div>');
            test = $compile(test)($scope);
            test.appendTo(document.body);
        }
    }
});

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css">
    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
  
  <script type="text/ng-template" id="test1.html">
    testFromTemplate<br/>
    {{testFromController}}
  </script>
  
  
    <a href="" testdirective ng-model="test">Affiche le template</a>
  
    <testDirective2 ng-model="name"></testDirective2>
  </body>
</html>

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
    z-index:9999;
    color:white;
}

.elementAdded2{
    position:absolute;
    top: 50px;
    left:50px;
    background-color:white;
    z-index: 10000;
}

    testFromTemplate<br/>
    {{testFromController}}
    <a href="" ng-click="testClick()">Test Click</a>