Angular Popover Directive with compile on popover content

var app = angular.module('angularjs-starter', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  $scope.order = {};
  $scope.order.showPopupAddedToCart = false;

  $scope.click = function() {
    console.log("button clicked");
    $scope.order.showPopupAddedToCart = !$scope.order.showPopupAddedToCart;
  };

});


//testing addToCart
app.directive("addToCart", ['$document', '$parse', '$log',
  function($document, $parse, $log) {
    return {
      restrict: 'AE',
      //templateUrl: "/templates/partial/somename",
      scope: {
        showPopup: '=', //watch to know when to throw the popover
        // AddedToCart: '=', //which popover to use.
      },
      controller: ["$scope", "$attrs", "$element", "$compile",
        function($scope, $attrs, $element, $compile) {

          $scope.init = function() {

            $scope.html = "<div class=\"AddedToCartPopup\" >"
            + "<div class=\"row-fluid\">"
            + "<div class=\"span4\">" + "<i class=\"Image fa fa-check   fa-4x\"></i>"
            + "</div>" + "<div class=\"span8\">" + "<span class=\"Title row-fluid\">Success!</span>"
            + "<span class=\"Message row-fluid\">Item Added to Cart</span>"
            + "</div>" + "</div>" + "<div class=\"row-fluid\">"
            + "<a href=\"javascript:void(0)\" class=\" span4 btn btn-mini btn-danger\" ng-click=\"closePopup()\" >Close</a>"
            + "<a class=\" span8 btn btn-mini\"  href=\"/checkout/cart.aspx\">Go To Cart</a>" + "</div>" + "</div>";

            //Create a watch to know when to open the PopOver Text
            $scope.$watch('showPopup', function(newValue, oldValue) {
              console.log("in watch.");
              if (newValue !== oldValue && newValue === true) {
                $scope.showPopupDiv();
              }
            }, true);



            $element.popover({
              content: function () {return $compile($scope.html)($scope); }, //thank you BEN
              html: true,
              trigger: "manual",
              //title: "Confirm"
            });

            //Add an event to hide the over.
            //hide the Popover - copied from the regular Directive.
            $('body').on('click', function(e) {
              if (!($element.is(e.target) || $element.has(e.target).length > 0) && $element.siblings('.popover').length !== 0 && $element.siblings('.popover').has(e.target).length === 0) {
                // $scope.showPopup = false;
                $element.popover('hide');
              }
            });


            //for testing.
            // $scope.showPopupDiv();


          };

          $scope.showPopupDiv = function() {

            //set the popover properties

            //compile the html so that it can access this scope.
            console.log('showPopupDiv');
            // open the popover.
            $element.popover('show');

          };


          $scope.closePopup = function() {
            //$scope.$apply(function () 
           // {
           $scope.showPopup = false;
           //}); // <<< the $apply call was moved to the callsite that doesn't execute in $apply call already


            $element.popover('hide');

          };

          //set the popover properties
          $scope.init();

        }
      ]
    }
  }
]);

<!DOCTYPE html>
<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8">
  <title>Custom Plunker</title>

  <!-- Jquery -->
  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <!-- Bootstrap -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">

  <!-- Angular -->
  <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>-->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>

  <!-- UI- bootstrap -->
  <!-- <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>-->
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>

  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <br />
  <br />
  <br />
  <br />

  <p>
    <div class="btn btn-primary" ng-click="click()"
    add-to-cart show-popup="order.showPopupAddedToCart">Add to Cart</div>
  </p>

  <br />
  <br />
  <br />
  <br />
  <br /> <b>Show Popup:</b> {{order.showPopupAddedToCart}}

</body>

</html>


/* From: http://css-tricks.com/css-transparency-settings-for-all-broswers/ */
input[type='checkbox'].greyed {
  /* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
/* REMOVED:	width: 100%; */
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=30);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.3;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.3;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.3;
}