angularjs - Angularディレクティブをjquery popoverに渡す

Question

名前のキーと値のペア、topChannelUserNames、および topChannelIds を含む dict (チャネル) を渡そうとしています。最後の 2 つは文字列の配列です。var ストリームに渡された正しい値が表示されていますが、ポップオーバーのコンテンツであるチャネル変数に反映されていません。ストリームを channelinfo ディレクティブに正しく渡すにはどうすればよいですか??

参考までに、チャネルはサーバー呼び出しから非同期的にスコープに入力されるため、ディレクティブが評価されるときは使用できないため、scope.$watch 呼び出しが行われます。

また、templateUrl が機能していないように見えるので、HTML テンプレート全体を channelinfo ディレクティブに含めています。

HTML コード:

<li><a popover="" rel="popover" data-placement="right" data-trigger="hover" stream="channels.comedy_talkshow" href="#/channel/comedy_talkshow">Talk Show</a></li>

Javascript コード:

blissApp.directive('popover', function($compile) {
return {
    restrict: 'A',
    scope: {
        stream: "="
    },
    link: function(scope, element, attrs)
    {
        var stream;

        scope.$watch('stream', function(newValue, oldValue) {
            stream = newValue;
            console.log('attribute = ' + stream);

        var ele = angular.element("<channelinfo data='stream'></channelinfo>");            
        var channel = $compile(ele)(scope);           
        console.log('content = ' + channel);
        $(element).popover({position: 'right', trigger: 'hover', placement: "right", content: channel});
        }, true);
    }
}
});

blissApp.directive('channelinfo' , function() {
return {
    restrict: 'E',
    scope: {data: "="},
    template: '<div style="padding:0px"> <div><span ng-repeat="thumbUrl in data.topChannelIds"> <img style="width:70px; height:70px; float:left;" src="https://i.ytimg.com/i/{{thumbUrl}}/mq1.jpg"/></span> <p style="color:#333; float:left">Including channels: <span ng-repeat="name in data.topChannelUserNames"> {{name}}<span ng-show=" ! $last ">, </span></span></p></div></div>'
    //templateUrl: 'template/popover/popover.html'
}
});