控制器不在另一个控制器内工作

Question

我有一个div，我在其中添加一个指令（Filtertest）。<div fitlertest></div> 它位于控制器ctrl1内。该指令有一个模板。模板有另一个控制器“classFilterCtrl”。

 angular.module("class-filter.tpl.html", []).run(function($templateCache) {
             $templateCache.put("class-filter.tpl.html", < div id = "filterpop"
                 ng - controller = "classFilterCtrl" >
                 < a class = "close-icon"
                 ng - click = "closeReport()" > < /a> < button ng - click = "classFilterPop()" > Show Filter < /button>");
             }).directive('fitlertest', function() {
             return {
                 restrict: 'AE',
                 replace: true,
                 templateUrl: 'class-filter.tpl.html'
             };
         });

现在我从模板调用classFilterPop（）。它不起作用。 这是控制器..

.controller('classFilterCtrl', function($scope) {
console.log('here')
$scope.classFilterPop = function() {
    var html = $compile('<div id="classFilter" class="panel-report-js"><div class="reports-popup" style = "position: absolute;top:53px !important;left:-60px !important; background:#FFF;"><div ng-include="../admin/common/jasper-reporting/context-handlers/class-tab/class-filter-popup.tpl.html" >Some Text</div></div></div>')($scope);
    console.log(html)
    angular.element('#menu-container').append(html);
}
scope.closeReport = function() {
    console.log("close clicked")
    angular.element('.panel-report-js').remove();
}

})