Angular UI Bootstrap: Dynamic popover template ID - angularjs

Question

Is it possible to use template with dynamic ID for Angular UI Popover?
For example:
<div ng-repeat="row in data">
<button class="btn" uib-popover-template="'myTemplate_{{row.id}}.html'" popover-trigger="mouseenter">View</button>
<script type="text/ng-template" id="myTemplate_{{row.id}}.html">
<strong>Name</strong>: {{row.name}}<br/>
<strong>Phone</strong>: {{row.phone}}<br/>
<strong>Email</strong>: {{row.email}}
</script>
</div>
When I mouseover the button Angular tries to fetch the template (eg myTemplate_1.html) from the server instead of using the ng-template.
Am I approaching this right? If not, what's the best way to assign dynamic html content to popovers?
Thanks.

Answer 1

Id's need to be unique, and any data passed through the uib-popover-template will be parsed. The data in the id=myTemplate_{{row.id}} is not being interpreted.
Try something like this:
angular.module('test', [])
.controller('GreetingController', ['$scope',
function($scope) {
$scope.data = [{
name: 'John'
}, {
name: 'Bill'
}];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="GreetingController">
<div ng-repeat="row in data">
<button class="btn" uib-popover-template="'myTemplate_row.html'" popover-trigger="'mouseenter'">View</button>
</div>
</div>
<script type="text/ng-template" id="myTemplate_row.html">
<strong>Name</strong>: {{row.name}}
<br/>
<strong>Phone</strong>: {{row.phone}}
<br/>
<strong>Email</strong>: {{row.email}}
</script>
Note example doesn't work as I don't have the uib module, but the basics are the same and should show up.