Displaying dynamic data from AngularJS to Twitter Bootstrap Popover

Question

I was attempting to get Bootstrap Popover to work with dynamic binded data in AngularJS with the AngularUI passthrough. In my fiddle i'm unable to dynamically show the title of office locations and list of people in each office: http://jsfiddle.net/stevenng/wmJtr/3/

Answer 1

One way you can do this is by just referencing office in the ui-options like this fiddle:

<div ng-repeat="office in offices">
  <a href="" ui-jq="popover" ui-options="{title:office.location, content:office.people.join(',')}">Test Popover - {{office.location}}</a>    
</div>    

Another way you can do this is to generate the ui-options through a function passing in the current item into it like this fiddle.

With this html snippet:

<div ng-repeat="office in offices">
  <a href="" ui-jq="popover" ui-options="popoverOptions(office)">Test Popover - {{office.location}}</a>    
</div>

And this controller code:

$scope.offices = [
    {location:'Europe', people:['andy','gloopy']},
    {location:'USA', people:['shaun','teri']},
    {location:'Asia', people:['ryu','bison']}];

$scope.popoverOptions = function(office){
    return { title: office.location,
             content: office.people.join(',') };
}      

Answer 2

We have few of the bootstrap components working here: https://github.com/angular/angular.js/blob/v1.0.x/src/bootstrap/bootstrap.js perhaps you can use it as inspiration for your popover?