How to enable popover feature for bootstrap in Angular framework

I have a question regarding the angular bootstrap popover feature.

I had a problem in my previous post saying the popover for bootstrap is not working.

How to enable bootstrap popover feature?

Turns out the problem seems only happened inside the ng-repeat elements.

I have something like

<div id='wrapper'>
  <span class='content' ng-repeat ='item in items'>

  <button type="button" class="testBtn btn btn-default" data-container="body" data-   
    toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."     
    title='item.title'>
  Popover on left
  </button>
  </span>
</div>

The popoever feature doesn't work but if I move button out of ng-repeat element, the popoever works.

<button type="button" class="testBtn btn btn-default" data-container="body" data-   
    toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."     
    title='test'>
  Popover on left
</button>

<div id='wrapper'>
  <span class='content' ng-repeat ='item in items'>
  </span> 
</div>

I am not sure if this is an angular bug or something. Can someone help me out? Thanks so much!

Solution

I have used the Bootstrap UI popover directive a couple of times.

Just add bootstrap ui as a dependency and you should be able to add

popover="I appeared on mouse enter!"

popover-trigger="mouseenter"

to any element you want a popout at. See http://angular-ui.github.io/bootstrap/#/popover for more information.