Javascript .html（）失去角度范围

当我尝试使用jquery的

HTML（）

将HTML附加到另一个元素时。我无法

ng单击
。下面是我的代码的大致描述。例如，我有一个名为
testController

angular.module("test")
.controller("testController", ["$scope", "$rootScope", 
    function ($scope, $rootScope) {

        var systemMessage = "<div><span><\/span><\/div>";

        $scope.appendHtml = function () {
            systemMessage.find("span").html('<button ng-click="highlightQuestion(id)">go to</button>');
        }

        $scope.highlightQuestion = function (id) {
            console.log(id);
        }

    }]);

角度模块（“测试”）
.controller（“testController”、[“$scope”、“$rootScope”，
函数（$scope，$rootScope）{
var systemMessage=“”；
$scope.appendHtml=函数（）{
systemMessage.find（“span”）.html（“转到”）；
}
$scope.highlightQuestion=函数（id）{
console.log（id）；
}
}]);

一旦HTML呈现出来，当我尝试单击按钮时，什么也没有发生。我所期望的是，它将能够访问
highlightQuestion
函数，因为在我的代码中
systemMessage
被附加到由
testController
控制的div中。有人对如何使这项工作有任何想法吗？谢谢
 您需要使用服务。将其注入
控制器
并使用

$scope.appendHtml = function () {
   var span = systemMessage.find("span");
   span.html('<button ng-click="highlightQuestion(id)">go to</button>');
   $compile(span)(scope);
}

$scope.appendHtml=函数（）{
var span=systemMessage.find（“span”）；
html（'goto'）；
$compile（span）（范围）；
}
您好，谢谢您的快速回复。你能给我看一个关于如何使用
$compile
的代码片段吗？按钮没有附加，但是容器被渲染了。将尝试不使用
contents（）
调用