How would I initialize bootstrap popovers for dom elements which appear conditionally?

[Shibu2]

I have the following code which shows up only when a certain input is provided in the widget, depending on which data.TestNow evaluates to true or false. I already have client-side javascript to initialize all bootstrap popovers when the document loads after listening to the ready element. (angular.element(document).ready). Is there a way to add a ready event to regular elements like the <i> tag below from which I am triggering a popover.

As I understand the order in which execution happens is

server code

client code

link function

<div ng-if="data.TestNow" class="cannot-complete">

<div id="WWW" class="yyy">
<i class="fa fa-info-circle" id="XXXX" data-toggle="popover" data-placement="bottom" data-html=true data-content="{{data.popOverHTML}}" data-trigger="hover" tabindex="-1" />
</div>

</div>

When I run code from the client controller during ng-change, the DOM hasn't loaded yet. So, not able to find the elements in the HTML and initialize the popover.

I can add <script></script> tags below the <i> tag and have it execute the initialization code. But, was thinking if there's a cleaner way to do this from the client controller or link function.

[nthumma · Accepted solution]

in the link function, you need to wrap your code into JS timeout function. See below example for reference

function(scope,element)
{
 if(scope.data.isNewRecord)
	 {
		 //Hiding activity section for new records.		 
		 setTimeout(function(){
			 element.find('legend:contains("Activity")').parent().hide();			 
		 },300);
	 }
}

[Shibu2]

Thanks. This solution worked. Another way of doing it is to use ng-show and initialize all the popovers in the client controller script.