Popover content not working with angularjs ng-click

Question

I have already read all the posts about this, but unfortunately none of them was helpful: jsfiddle and plunker links appear to be no longer working.

What I am trying to do is to simply put a button inside the bootstrap pop-over which makes a call to a function inside the scope of the directive I've created. The problem is that using jquery to grab the content it does not work since the scope appear to be outside. Also trying to create the content inside the function it won't work because it will be not compiled.

I created an example on jsfiddle, but somehow angularjs is not loaded in the right point and therefore it doesn't work either.

$("#pop-over-link").popover({
      'placement': 'top',
      'trigger': 'click',
      'html': true,
      'container': 'body',
      'content': function() {
           return $("#pop-over-content").html();
      }
});

This is the piece of code that opens the pop over, grabs the contents and shows it.

Here the jsfiddle: http://jsfiddle.net/75zLT/2/

And here is the working example on my dropbox: https://dl.dropboxusercontent.com/u/19470623/hatethis/test.html

Answer 1

There were 2 issues your were not including ngRoute in your fiddle and your need to compile the content returned in the popover.

'content': function() {
     return $compile($("#pop-over-content").html())(scope);
 }

Also you do not need the timeout.

Example: Plunker