Adding ng-click to leaflet popup onEachFeature function

Question

I have created map and connected it with my geojson api.Basically I wish to link each marker popup with ng-click. Putting simple html like this wont do the job since i have to compile it:

layer.bindPopup("<button ng-click='()'>+feature.properties.title+</button>");

And that is what I'm trying to do. Here's that chunk of code. I am getting the "Error: [ng:areq] Argument 'scope' is required "

$http.get("http://markers.json").success(function(data, status) {
angular.extend($scope, {
geojson: {
  data: data,
  onEachFeature: function(feature, layer, scope) {
    var template = "<button class='button button-clear button-royal' ng-click='aa()')>" +feature.properties.title +"</button>";
    var linkFn = $compile(template);
    var content = linkFn(scope);
    layer.bindPopup(content);
 },
}
});
});

I am pretty new to angular and js so I suppose I'm missing something obvious and stupid here. Thanks!

Answer 1

You don't need to add scope as a parameter to your onEachFeature method. The scope is already available in variable $scope:

$http.get("http://markers.json").success(function(data, status) {
    angular.extend($scope, {
        geojson: {
            data: data,
            onEachFeature: function(feature, layer) {
                var template = "<button class='button button-clear button-small button-royal' ng-click='aa()'>" +feature.properties.title +"</button>";
                var linkFn = $compile(template);
                var content = linkFn($scope);
                layer.bindPopup(content[0]);
            }
        }
    });
});

Example: http://plnkr.co/edit/5cMWuhQeJLg5zkX9hVYK?p=preview