AngularJS + Bootstrap - inject $compiled HTML into popover

Question

I am trying to build dynamic content for the popover of a series 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's content contains the HTML content of the .pop-content sibling of the popover:

<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 content of the popover will remain the uncompiled, raw html and not a rendered angular template:

How can I inject the fully rendered Angular template (which will use directives such as ng-click and ng-hide) into the popover? I tried calling $compile( (element).siblings(".pop-content").html() )(scope) as content but results in completely empty popovers.

Answer 1

You're on the right track with using $compile; however, you need to pass $compile the .contents() not the .html():

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

JSFiddle