Ng-click不会触发指令中的附加项

Question

我有一个简单的指令，可以在我的dom上添加一个按钮。但是，该按钮上的ng-click功能未触发。我做错了什么？

app.directive("addwidget", function($compile) {
    function link(scope, element, attrs) {
        var currentVal, wigetId;
        element.on("click", function() {
            if (this.checked) {
                angular.element(document.getElementById('space-for-widgets'))
                    .append($compile("<button ng-click='removeWidFromPage()'>Hello World</button>")(scope));
            }
        });
    };
    return {
        restrict: 'AE',
        link: link
    }
});

    app.directive('widget',  function(){
    return{
        restrict:'AE',
        template:'<div id="space-for-widgets"></div>' ,

    };  
});

这是我的控制器：

app.controller("mainController", ['$scope', '$window', function($scope, $window){
    $scope.removeWidFromPage = function(){
        $window.alert("button called");
    } 
}]);

以下是我的plunker的链接：http://plnkr.co/edit/qaKKN6LFnLV4uBRgOi2H?p=preview