jquery popover doesn't work with angularjs

By : Pooya
Source: Stackoverflow.com

there is a nice trick to use jquery popover and that is populating a hidden div with our data and telling the clicked button to show a popover and render the div as the content of that popover.when you have more than one div, you have to separate them by classes and this is where we run into problem. angularjs codes(such as ngrepeat) doesn't convert to html code and in fact there is no html div to tell the jquery to render(if you look at the source of the page, the angularjs ng-repeats are not extracted to html elements and stayed as the angular syntaxes).because those divs are going to be generated through a ngrepeat and jquery doesn't understand that there will be no html div. what is the solution? ( here is my code:)

<script type="text/javascript">
$(function () {
$('.product-show').each( function() { $(this).popover({
html : true ,
content : function() { return $(".editform"+this.id).html(); },
placement : 'bottom'
<li ng-repeat='product in products' class="span3">
<a class='btn btn-mini product-show' id={{product.id}} data-value={{product.id}} >show</a>
<div class="editform{{product.id}} hide">
By : Pooya


The problem here is that your jQuery function is called before angular has even started the rendering of the ng-repeat (hence the empty collection when in your jQuery function).

I will encourage you to use the popover of the Angular UI Bootstrap project see here. Those are written fully with angular and will play nicely with your angular template.

If you still need/want/prefer the jQuery approach you may consider writing your own directive. Usually recommended when you want to perform DOM manipulation.

This video can help you solving your question :)
By: admin