Populate angular ui bootstrap popover

Question

How do you populate an angular ui bootstrap popover? I want to populate the popover with a list of actor names. Here is the code:

<div class="container" ng-if="radioModel=='Search for Actor'">
    <p>Movies played in:</p>
      <table class="table table-bordered">
        <tr ng-repeat="name in listOfMovies">
        <td>
        <p>
          <button uib-popover="populateWithListOfData" popover-trigger="mouseenter" type="button" class="btn btn-default"> {{ name }}</button>
        </p>   
       </td>
       </tr>
     </table>
 </div>

I want to be able to populate this popover for each name of the ng-repeat. So I will get a name of a movie and based on that name I want to populate the popover with a list of actors in that movie. Thanks guys.

Answer 1

This is definitely possible. I have setup a data item called friends in JS

$scope.friends = [
    {name:'John'},
    {name:'Jessie'},
    {name:'Johanna'},
    {name:'Joy'}
      ];

Also , an array was created for the text in the popup

$scope.toolTip =['D','A','C','T'];

If you want to display a pop up for each row.

I've created the ng-repeat and the relevant popover.In order to display all the letters in the first popover.

<div ng-repeat="f in friends">
{{f.name}}
<button  uib-tooltip="{{toolTip[$index]}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
</div>

Here is a working demo

How does it works?

Your tool tip value is set as uib-tooltip="{{toolTip[$index]}}".it accesses each element according to the $index obtained from ng-repeat.

If you want to display all the data in the first pop up

I've created the ng-repeat and the relevant popover.In order to display all the letters in the first popover.

   <div ng-repeat="f in friends">
   <div ng-if="$index==0">
   <button  uib-tooltip="{{toolTip}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
</div>
   {{f.name}}
   </div>

Here is a working demo

How does it works?

Your tool tip value is set as uib-tooltip="{{toolTip}}".It enters the ng-if , if the condition is met, and thus prints the array.