angular-ui: Using popover-template

Question

I posted an earlier question: angular-ui-bootstrap: Implementing html in popover using popover-html and it was suggested I use popover-template.

<i popover-template="popover-partial.html" popover-title="In Progress" class="glyphicon glyphicon-info-sign"></i>

<script type="text/ng-template" id="popover-partial.html">
    <b>Jody</b>
</script>

So I'm trying to do that but now the popover won't activate on click.

I'm using version 0.13.4.

Answer 1

popover-template value should be string, In other way you could say that, it needs an expression/scopeVariable.

<i popover-template="'popover-partial.html'" 
  popover-title="In Progress" 
  class="glyphicon glyphicon-info-sign">
</i>

Demo

Answer 2

You have to expose the template to the scope for it to work. This is better anyways as now your template can be more dynamic by setting variables and models on the scope. You can also set up a template provider so you don't have all of these little script tags under your html code.

In your view:

<i popover-template="popover.templateUrl" 
popover-title="popover.title" class="glyphicon glyphicon-info-sign"></i>

<script type="text/ng-template" id="popover-partial.html">
<b>Jody</b>
</script>

In your controller:

$scope.popover = {
templateUrl: 'popover-partial.html',
title: 'Title'
};