Using $compile on a html string only returns first line

I’m working on a leaflet map that contains markers. I’m using angular.js. I want to bind a popup to each marker which contain information about the marker. If you click on the marker name it should call a function.

This is my .js :

var boreholePopup = ('<a ng-click="boreholeMarkerClicked(' + $scope.boreholes[i] + ')">' +
   $scope.boreholes[i].boreholeName + "</a><br>Elevation: " +
   $scope.boreholes[i].boreholeName + "m<br>Type: " + 
   var compiled = $compile(boreholePopup)($scope);
   console.log('compiled', compiled);
        .on('mouseover', function(e) {

At the moment only the first line is showing in the popup. The link works fine at the moment but I would like to have all the html shown in the popup. Can someone please help or suggest a better way to do it?

Source: AngularJS

Related Post