Using Angular inside of a bootstrap popover

Question

I'm trying to create a table inside a Bootstrap popover that has an ng-repeat to make the rows but it seems like the angular is failing and I'm not sure why.

HTML:

<a  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-right"
    data-toggle="popover"
    data-placement="left"
    data-html="true"
    title="Popover title"
    data-content=
    '<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days">
           <td>{{d}}</td>
         </tr>
       </tbody>
     </table>'>
      <i class="fa fa-clock-o fa-lg"></i>
</a>
<script type="text/javascript" >
  $('#showDays').popover();
</script>

Controller:

$scope.days = [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday'
];

The result is that the popover body has one row that is empty. Any help is appreciated. Thank you!

Answer 1

Seems like probably what you are trying to achieve is not yet supported in angular version, you can instead create a directive of your own and do something like this;-

.directive('popover', function($compile, $timeout){
  return {
    restrict: 'A',
    link:function(scope, el, attrs){
      var content = attrs.content; //get the template from the attribute
      var elm = angular.element('<div />'); //create a temporary element
      elm.append(attrs.content); //append the content
      $compile(elm)(scope); //compile 
      $timeout(function() { //Once That is rendered
        el.removeAttr('popover').attr('data-content',elm.html()); //Update the attribute
        el.popover(); //set up popover
       });
    }
  }
})

and in your popover html add the directive attribute popover:-

 <a popover  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-left"
    data-toggle="popover"
    data-placement="right"
    data-html="true"
    title="Popover title"
    data-content=
    '<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days">
           <td ng-bind="d"></td>
         </tr>
       </tbody>
     </table>'>
      <i class="fa fa-clock-o fa-lg">Click me</i>
  </a>

Demo

Making it bit more configurable, pass the settings, Demo:-

Answer 2

You can make this work out of the box using angular-strap popovers.

Angular Strap Project

Angular Strap is native bootstrap directives done right. So basically it would look like this:

---

HTML for calling/activating popover

<a  id="showDays"
type="button"
class="btn btn-success btn-xs pull-right"
data-trigger="hover" //i wasn't sure what trigger you wanted
ng-model="days"
data-placement="left"
data-html="true"
title="Popover title" //optional
data-template="file-path/to-local-HTML-template.html"
bs-popover>
</a>

---

pop over template

    <div class="popover" tabindex="-1">
    <div class="arrow"></div>
    <h3 class="popover-title" ng-bind-html="title">Your Title</h3>
    <div class="popover-content">
       <table class="table table-condensed">
           <tbody>
               <tr ng-repeat="d in days">
                   <td ng-bind="d"></td>
               </tr>
           </tbody>
       </table>'>
  <i class="fa fa-clock-o fa-lg">Click me</i>
    </div>
</div>

If that doesn't work it should be 99.9% there and it shouldn't take too much effort to fill in the gaps by looking at angular strap's documentation. They have great docs. The strap project also has great implementations for most of the rest of the boostrap 3 components.

Plukr using the above code for popover demo

Like I said that code up there is like 99% there, but just to go the extra mile I did up a plunk demo to show exactly how it's done.