How to update angular-ui (bootstrap) popover content dynamically

Question

I'm trying to change popover's content dynamically binding 'uib-popover-title' with 'dacc.getSearchResultHTML()' function, but updating 'dacc.codeJerarchy.parent' object just changes popover's title.

I'm missing something or do i need to redefine the HTML element? Its the only way i achieved to update the content for the moment.

Thanks!

<button uib-popover-html="'{{ dacc.getSearchResultHTML(dacc.codeJerarchy.parent) }}'"
popover-title="{{ dacc.codeJerarchy.parent.short }}"
popover-placement="right"
popover-append-to-body="true" type="button"
class="btn btn-sm btn-default">i</button>

//-------------------------------------------

dacc.getSearchResultHTML = function(searchResult) {
    return $sce.trustAsHtml(he.encode(he.escape(searchResult.long)).replace(/\n/g, '<br />'));
};

Answer 1

uib-popover-html takes an angular expression, it's unnecessary to wrap your function call with double curly braces. Instead, pass in a variable/function on the $scope object.

HTML

<button type="button" class="btn btn-sm btn-default"
    uib-popover-html="dacc.getSearchResultHTML(dacc.codeJerarchy.parent)"
    popover-title="{{ dacc.codeJerarchy.parent.short }}"
    popover-placement="right"
    popover-append-to-body="true"        
    >
    i
</button>

Controller

$scope.dacc = {
    getSearchResultHTML: function(input) {
        ...
        return output;
    }
}