Invoking a function by passing arguments within $Scope does not work

Question

I have a function in a file called "mapHelper.js" responsible for adding popups on a map:

     function writeMarker(x,y,msg) {
     var muxiCoordinates = [x,y];
     var muxiMarkerMessage = msg;
     L.marker(muxiCoordinates).addTo(map).bindPopup(muxiMarkerMessage).openPopup();
     }

A controller that allows you to read the database data to $Scope.markers. The data is a list of coordinates and messages "x,y,msg"

angular.module("app",[]);
angular.module("app").controller("appCtrl",function($scope,$http){
    $http.get('/markers').then(function (res) {
        console.log("Got the data");
        $scope.markers=res.data;
    });
});

The question is: how to invoke this function by passing the arguments within $Scope?

I thought of something like:

    div(ng-repeat="marker in markers")
        script.
            writeMarker({{marker.x}},{{marker.y}},{{marker.msg}});

but it doesn’t work.

Answer 1

If your intention is to display exactly when the angular $http return happens, you can pass in the same Response.

angular.module("app",[]);
angular.module("app").controller("appCtrl",function($scope,$http){
    $http.get('/markers').then(function (res) {
        console.log("Got the data");
        for(var i = 0; i < resp.data.length; i++){
            var data = resp.data[i];
            writeMarker(data.x,data.y,data.msg);
        }
    });
});

Now, if you want to use this javascript function dynamically, you can pass the javascript function to a scope angle, and then use with a ng-click or something like, as you intended to do:

$scope.writeMarker = writeMarker;