Cannot get leaflet popup to work with angularjs directive (and partial)

Question

I am trying to write a directive to fill a leaflet marker pop-up. I have been banging my head against the wall trying to figure out what I am doing wrong. My pop-up is always empty.

Any one successfully done this before?

Here is a plunker showing the problem: http://plnkr.co/edit/53bebb?p=preview

Answer 1

marker.bindPopup(e[0]); instead of marker.bindPopup(clonedElement[0]);

Answer 2

Try this:

var directiveTag = $(document.createElement("search-results-map-marker-popup"));
var compiledDirective = $compile(directiveTag)(popupScope);

newMarker.bindPopup(compiledDirective[0]);

Answer 3

You can use the new support for Angular content in angular-leaflet-directive:

var html = '<br><span ng-class="thumbsUpClass(item)" ' +
    'ng-click="addChoice(item,set)"><span class="popup-container"><span ' +
    'class="icon-stack thumbs-up-stack"><i class="icon-sign-blank ' +
    'icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>';

... 

$scope.markers.push( { lat: ...,
                       lng: ...,
                       message: html,
                       getMessageScope: function() { return $scope; },          
});