Angularjs 剑道UI panelBar内容无法编译

我有一个剑道UI面板，我想动态加载数据。我希望inside panelBar选项有一个使用角度的模板。我有这部分代码，但这不起作用

    $http({
        method: 'GET',
        url: '/PDFEditor/GetPDFDocumentInfo',
        params: { fileId: fileId }
    }).then(function successCallback(response) {

        $scope.test = "My name is: <h1>Bond, James Bond </h1>";

        var tml = '<div id="testId"></div>';

        $scope.pdfInfo = response.data;

        $scope.appendToPanelBar([{
            text: 'Info',
            content: tml
        }]);

        document.getElementById("testId").innerHTML = "<p ng-bind-html=\"test\"></p> {{test}}";


    }, function errorCallback(response) {
        //todo
        console.error('todo error handling');
    });

$http({
方法：“GET”，
url:“/PDFEditor/GetPDFDocumentInfo”，
参数：{fileId:fileId}
}).then（函数成功回调（响应）{
$scope.test=“我的名字是：邦德，詹姆斯·邦德”；
var tml=''；
$scope.pdfInfo=response.data；
$scope.appendToPanelBar([{
文本：“信息”，
内容：tml
}]);
document.getElementById（“testId”）.innerHTML=“
{test}”；
}，函数errorCallback（响应）{
//待办事项
console.error（“todo错误处理”）；
});

我还尝试不使用id获取元素并直接添加到内容：{{test}。似乎AngularJS没有编译此模板。

我找到了解决方案

        $scope.test = "My name is: <h1>Bond, James Bond </h1>";

        var tml = '<div id="testId"></div>';
        var data = $compile('<p>{{test}}</p>')($scope);
        console.log(data)
        $scope.pdfInfo = response.data;

        $scope.appendToPanelBar([{
            text: 'Info',
            content: tml
        }]);

        document.getElementById("testId").append(data[0]);

$scope.test=“我的名字是：邦德，詹姆斯·邦德”；
var tml=''；
var data=$compile（'{{test}}
'）（$scope）；
console.log（数据）
$scope.pdfInfo=response.data；
$scope.appendToPanelBar([{
文本：“信息”，
内容：tml
}]);
document.getElementById（“testId”）.append（数据[0]）；

干杯