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:

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('
'); //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:-

 
      Click me
  

Demo

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