title: how to show html on pop over using angular ui bootstrap?
body: <p>I make demo of pop over like this .It show a pop over on right side when I click the button .But now problem is that how I will show some html on pop over .</p>
  
  <pre><code>&lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
       &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;button popover-placement="right" popover="On the Right!" class="btn btn-default"&gt;Right&lt;/button&gt;
    &lt;/body&gt;
  &lt;script&gt;
  angular.module('plunker', ['ui.bootstrap']);
  
  &lt;/script&gt;  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I have this HTML I need to how on  add this on pop over .I know there is way in bootrap.js to add html on popover .I don't want to use that I want to use angular UI bootrap.js</p>
  
  <pre><code>&lt;div ng-controller="axcont"&gt;
  &lt;ul class="list-group"&gt;
    &lt;li class="list-group-item" ng-click="add()"&gt;add row&lt;/li&gt;
    &lt;li class="list-group-item " ng-click="deleteRow($index)"&gt;Deleterow&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I did more try on that like that but getting undefined.May be I am wrong I just doing RND </p>
  
  <pre><code>&lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
       &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;button pop-over title="Mode of transport" content-url="pop.html" class="btn btn-default"&gt;Right&lt;/button&gt;
    &lt;/body&gt;
  &lt;script&gt;
  var a=angular.module('plunker', ['ui.bootstrap']);
  a.directive('popOver', function ($compile, $http, $templateCache) {
    return {
      restrict: 'A',
      scope: true,
      link: function popOverPostLink(scope, elem, attrs) {
        $http.get(attrs.contentUrl, {cache: $templateCache}).success(
          function (tmpl) {
            var options = {
              content: $compile(tmpl)(scope),
              placement: 'bottom',
              html: true,
              trigger:'click',
              title: attrs.title
            };
            elem.popover(options);
            scope.hidePopover = function () {
              elem.popover('hide');
            }
          }
        );
      }
    };
  });
  
  &lt;/script&gt;  
  
  &lt;/html&gt;
  </code></pre>