title: Popover Template in Angular UI
body: <p>I am using angular-ui-bootstrap in my current project, and I have a requirement for a popover to open up in each row in a grid displaying row specific information. The popover should have its own HTML template and there are multiple fields that can be bound in the HTML template. Here is the code I have written to achieve the same. I did try to pass the html template with no luck. Any help is appreciated.</p>
  
  <p>HTML Code: </p>
  
  <pre><code>&lt;div ng-app="helloAngular" ng-controller="casesCntrl"&gt;
    &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th class=""&gt;Date&lt;/th&gt;
          &lt;th class=""&gt;Case&lt;/th&gt;                    
          &lt;th class=""&gt;Severity&lt;/th&gt;                
          &lt;th class=""&gt;Status&lt;/th&gt;
          &lt;th class=""&gt;Site&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr ng-repeat="case in cases"&gt;
          &lt;td&gt;{{case.casedate | date:'MM/dd/yyyy'}}&lt;/td&gt;  
          &lt;td&gt;&lt;a ng-href="#/site/{{case.id}}"&gt;{{case.name}}&lt;/a&gt;&lt;/td&gt;
          &lt;td ng-class="{'case-critical':case.severity==1, 'case-urgent':case.severity==2, 'case-normal':case.severity==3}"  class="case-none"&gt;&lt;/td&gt;  
          &lt;td&gt;{{case.status}}&lt;/td&gt;    
          &lt;td&gt;{{case.sitename}}&amp;nbsp;&lt;button popover="{{case.sitename}}" popover-title="{{case.sitedescription}}"  data-placement="bottom" data-trigger="focus" class="btn btn-default" popover-unsafe-html="This is a Help but please &lt;b&gt; focus &lt;/b&gt; on this"&gt;V&lt;/button&gt;&lt;/td&gt;    
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code>function CasesController($scope) {    
  
  var casesData = [
    {
  
      "name": "Case -1",
      "casedate":"2013-06-26T08:02:00-0700",
      "caseid":1,
      "severity": "1",
      "status":"New",
      "siteid":1,
      "sitename":"Merchant Demo 1"
    },
    {
      "name": "Case -2",
      "casedate":"2013-01-26T08:02:00-0700",
      "caseid":2,
      "severity": "1",
      "status":"New",
      "siteid":2,
      "sitename":"Merchant Demo 2"
    },
    {
      "name": "Case -3",
      "casedate":"2013-02-26T08:02:00-0700",
      "caseid":3,
      "severity": "1",
      "status":"Accepted",
      "siteid":1,
      "sitename":"Merchant Demo 3"
    } ,
    {
      "name": "Case -4",
      "casedate":"2013-05-26T08:02:00-0700",
      "caseid":4,
      "severity": "2",
      "status":"New",
      "siteid":1,
      "sitename":"Merchant Demo 4"
    } ,
    {
      "name": "Case -5",
      "casedate":"2013-09-26T08:02:00-0700",
      "caseid":5,
      "severity": "3",
      "status":"New",
      "siteid":1,
      "sitename":"Merchant Demo 5"
    } ,
    {
      "name": "Case -6",
      "casedate":"2013-04-26T08:02:00-0700",
      "caseid":6,
      "severity": "1",
      "status":"Sent to billing",
      "siteid":1,
      "sitename":"Merchant Demo 6"
    },
    {
      "name": "Case -7",
      "casedate":"2013-10-26T08:02:00-0700",
      "caseid":7,
      "severity": "3",
      "status":"New",
      "siteid":1,
      "sitename":"Merchant Demo 7"
    }
   ];
  $scope.cases = casesData;
  }
  </code></pre>
  
  <p>Here is the fiddle that has the same code as described above:
  <a href="http://jsfiddle.net/anirbankundu/YyK5s/4/" rel="noreferrer">http://jsfiddle.net/anirbankundu/YyK5s/4/</a></p>
  
  <p>I did try the option by passing popover-unsafe-html as described in <a href="https://github.com/angular-ui/bootstrap/pull/641" rel="noreferrer">https://github.com/angular-ui/bootstrap/pull/641</a></p>