AngularJS - dynamic event adding

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-app="miniapp" ng-controller="Ctrl">

<div id="div" ng-click="addingEvent()">DIV </div>

<div id="template">
<a ng-click="afterEvent()" href="#">anchor addedd </a><br>
</div>
 
<div id="paste">penampung </div>
  

</div>

JavaScript

var $scope;
var app = angular.module('miniapp', []);
var template2 = $("#template").html();
alert(template2);

function Ctrl($scope, $compile) {
 
      $scope.addingEvent = function(){
     
   var myEl = angular.element( document.querySelector( '#paste' ) );
		myEl.append($compile(template2)($scope)); 
   
    };
     $scope.afterEvent = function(){
       alert('after event');
    };
            
};