angular ui bootstrap popover open programmatically

Question

I am trying to open the popover dynamically by setting popover-is-open property to true dynamically from the controller like this:

    var el = angular.element(target.id); //popover attached to this element
    el.attr('popover-is-open',true) //setting attribute to true
    $compile(el.contents())($scope) //recompiling
    $scope.$digest();//running digest

Here is the html

<div id="taskcard-{{task.externalId}}" 
     popover-append-to-body="true" 
     popover-trigger="'none'" 
     popover-is-open="false"
     uib-popover-template="templateurl" 
     popover-title="testing">
          POPOVERS
</div>

Now, this doesn't work. Is there any other way around this?

Answer 1

You can use some Boolean flag instead something like task.popoverIsOpen in popover-is-open attribute and can set it to true or false to open/close popover something like

 <div id="taskcard-{{task.externalId}}" 
     popover-append-to-body="true" 
     popover-trigger="'none'" 
     popover-is-open="task.popoverIsOpen"
     uib-popover-template="dynamicPopover.templateUrl" 
     popover-title="testing">
          POPOVERS
</div>

Set popoverIsOpen to true when you need

task.popoverIsOpen=true;

Working demo