Leaflet popup w/ angularjs

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $compile) {
  console.log('inside main controller');

  // create a map in the "map" div, set the view to a given place and zoom
  var map = L.map("map").setView([44, -121.23], 12);
  
  // add an OpenStreetMap tile layer
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  
  // add a marker in the given location, attach some popup content to it and open the popup
  var marker = L.marker([0, 0]).addTo(map);
      
  var e = angular.element('<div popup></div>');
  var newScope = $scope.$new();
  $compile(e)(newScope, function(clonedElement, scope) {
    marker.bindPopup(clonedElement[0]);
  });

});

<!DOCTYPE html>
<html ng-app="plunker" ng-controller="MainCtrl">

<head>
<meta charset="utf-8">
<title>Leaflet</title>
<script>
  document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet"  href="style.css" />

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
 
<!-- to create a map, simple use the map directive; layers inside the tag are 
  transcluded and will be added to the map (but not the DOM!) 
  -->
<body >
  <div  id='map'></div>
</body>
<script src="app.js"></script>
<script src="popup-directive.js"></script>
</html>

* {
  box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: inherit;
}

/** Setting the default font sizes */
html {
	width: 100%;
	height: 100%;
	background-color: #555566;
}

body {
	font-size: 40px;
	width: 100%;
	height: 100%;
	cursor: auto;
	background-color: #555566;
}

#map {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	z-index: 0;
}

<div>
  <h4>Hello</h4>
  <p>This is a popupo from a template.</p>
</div>

app.directive('popup', function () {
  return {
    restrict: 'A',
    templateUrl: 'popup-template.html',
    controller: function($scope) {
      console.log('up in the popup directive');
    }
  }
});