twitter bootstrap popover doesn't work with angularjs

Question

I was trying to use twitter bootstrap popover on my webpage when I discover that it doesn't work when it is placed below a <div> with ng-repeat. It works fine at the top within a div class that doesn't contain ng- does anyone know why did it happen and how can I work around the issue?

<h3>Students Without Team</h3>
 <div class="accordion" id="studentNoTeamAccordion" >
         <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
            data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea>  
                   <P>
                      <input class='btn btn-primary' type='submit' value='Send' />
               </form>"
            data-placement="right" data-original-title="Enquiries">Send Enquiries
        </a>
  <div class="accordion-group" ng-repeat="(key,val) in stud_finding"><
      <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
         data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea> 
                   <P>
                       <input class='btn btn-primary' type='submit' value='Send' />
               </form>"

Answer 1

I don't see why this question got down-voted. It's a good example on how to understand the principle of scopes in angular. A scope is basically attached to a DOM element. All the controllers, repeats, etc. will only work in this DOM element (the scope). When Boostrap creates a popover, it creates a new DOM element and appends it to body, so now it's out of the scope (it is not in the element any more). That's a key feature to understand about Angular.

Luckily, Bootstrap has the solution. Popover has a container option that lets you append the popover to a specific element instead of body. Put there the jQuery selector of the DOM element that has the angular controller. http://twitter.github.io/bootstrap/javascript.html#popovers (see Options)

Answer 2

At the moment there are at lest 2 projects that got Bootstrap's popover directives for AngularJS written already:

• http://angular-ui.github.com/bootstrap/
• http://mgcrea.github.com/angular-strap/

The difference is that http://angular-ui.github.com/bootstrap/ is native AngularJS directives so you don't need any 3rd party JavaScript dependencies.

Both projects are hosted on GitHub so you can see implementations and either learn from them, decide to change or just use one of the projects.