angular popover with html

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="MyApp" style="margin:40px;">
  
    <h1>popup html unsafe</h1>
    <br/>
    <br/>
    <br/>
    <div ng-controller="PopoverDemoCtrl">
      <button popover="Safe text" class="btn btn-default">just text</button>
      <button popover="<b>unsafe text</b>" class="btn btn-default">with html</button>
      <button popover-title="<h3>html title</h3>" popover="<p>unsafe text</p><p>2nd line</p>" class="btn btn-default">with html and title</button>
    </div>
  </body>

</html>

// Code goes here

var MyApp  = angular.module('MyApp',['ui.bootstrap']);
MyApp.filter('unsafe', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
}]);

MyApp.controller('PopoverDemoCtrl', ['$scope',function ($scope) {
  $scope.dynamicPopover = "Hello, <b>World!</b>";
}]);

// update popover template for binding unsafe html
angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/popover/popover.html",
      "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
      "  <div class=\"arrow\"></div>\n" +
      "\n" +
      "  <div class=\"popover-inner\">\n" +
      "      <h3 class=\"popover-title\" ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h3>\n" +
      "      <div class=\"popover-content\"ng-bind-html=\"content | unsafe\"></div>\n" +
      "  </div>\n" +
      "</div>\n" +
      "");
}]);

/* Styles go here */