AngularJS + Bootstrap - embeds $ compiled HTML in a popover

Question

I am trying to create dynamic content for popover a number of elements.

Using this directive:

.directive('popover', function($compile){
    return {
        link: function(scope, element, attrs) {
            // define popover for this element
            $(element).popover({
                html: true,
                placement: "top",
                // grab popover content from the next element
                content: $(element).siblings(".pop-content").html()
            });
        }
    }
});

The popover content contains the content of the .pop-content sibling popover HTML file:

<div ng-repeat="o in os">
    <a popover href="javascript:;">
        show popover
    </a>

    <div ng-hide="true" class="pop-content">
        {{ 3+4 }}
    </div>
</div>

Unfortunately, the popover content will remain uncompiled, unprocessed html, and not processed by the angular template:

How can I insert a fully displayable angular template (which will use directives like ng-click and ng-hide) in a popover? I tried calling $compile( (element).siblings(".pop-content").html() )(scope)as content, but leads to completely empty popovers.

Answer 1

$; $compile .contents() .html():

// grab popover content from the next element
content: $compile( $(element).siblings(".pop-content").contents() )(scope)

JSFiddle

Answer 2

. scope , $compile:

.directive('popover', function($compile){
    return function(scope, element, attrs) {

        var tpl = $(element).find('.pop-content').html();

        $(element).popover({
            html: true,
            placement: "top",
            content: $compile(tpl)(scope)
        });

    };
});

, .popover-content element:

<div popover>
     <div class="popover-content">{{ 3+4 }}</div>
</div>