AngularJS ngRepeat function call

Question

I'm using a leaflet map in my application but I need to add markers to this map. The information about the coördinates for this marker I need to get from a json file.

So my plan was to use a ng-repeat in my view (marker in markers) and then for every marker call a function in my controller (createMarkers(marker.lat, markter.lng))

But I don't know if this is possible? Maybe there is another way to do this?

Hope to get some help with this :)

controller

lycheeControllers.controller(
  'routeCtrl',
  [
    '$scope',
    '$http',
    function ($scope, $http) {
      $http.get('json/route.json').success(
        function (data) {
          $scope.titel = "Transport route van India naar Italie"
          $scope.markers = data;

          var map = new L.Map('map');

          L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
              maxZoom: 18
            }
          ).addTo(map);

          map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

          var muzzafarpur = new L.LatLng(26.117482, 85.363364);
          map.setView(muzzafarpur, 3);

          $scope.plaatsMarkers = function(){
            alert("test");
          }

          //Extend the Default marker class
          var RedIcon = L.Icon.Default.extend(
            {
              options: {
                iconUrl: '../app/img/marker-icon.png'
              }
            }
          );

          var redIcon = new RedIcon();
        }
      );
    }
  ]
);

HTML

<section id="panel">
<section id="titel">{{titel}}</section>

<div id="map">
  <div ng-repeat="mark in markers">{{plaatsMarkers()}}</div>
</div>

JSON

[
  {
    "naam": "lychee",
    "markers": [
      {
        "mark": [
          {
            "naam": "Muzzafarpur",
            "tekst": "Lycheeplantage: de lychees worden per vrachtwagen tot de haven van Kolkata gebracht.",
            "datum": 1,
            "lng": 26.117482,
            "lat": 85.363364
          },
          {
            "naam": "Kolkata",
            "tekst": "Van hieruit vertrekt het hoofdtransport richting Gioia Tauro.",
            "datum": 2,
            "lng": 22.572765,
            "lat": 88.363975
          },
          {
            "naam": "Colombi (Sri Lanka)",
            "tekst": "Hier wordt een tussenstop gemaakt",
            "datum": 3,
            "lng": 6.947216,
            "lat": 79.844486
          },
          {
            "naam": "Golf van Aden",
            "tekst": "Risico wegens piraterij.",
            "datum": 4,
            "lng": 12.640338,
            "lat": 47.849579
          },
          {
            "naam": "Suezkanaal",
            "tekst": "Hier dient tol betaald te worden. Deze route bespaart echter wel in afstand.",
            "datum": 5,
            "lng": 30.841705,
            "lat": 32.317608
          },
          {
            "naam": "Malta",
            "tekst": "Hier wordt er overgeschakelt naar een ander schip (JRS Capella) en via de FAS Adriatic 2 Feeder Service wordt er verder koerst gezet richting Gioia Tauro.",
            "datum": 6,
            "lng": 35.902973,
            "lat": 14.523021
          },
          {
            "naam": "Gioia Tauro",
            "tekst": "Aankomst in Italie. Van hieruit worden de lychees vervoert naar de verschillende Carrefour winkels.",
            "datum": 7,
            "lng": 38.443573,
            "lat": 15.898798
          }
        ]
      }
    ]
  }
]

Answer 1

So my plan was to use a ng-repeat in my view (marker in markers) and then for every marker call a function in my controller (createMarkers(marker.lat, markter.lng))

I'm not familiar with leaflet but what seems me write is to deep $watch on markers:

JS

 $scope.$watch('list[0].markers[0].mark', function(rows) { 
    angular.forEach(rows, function(pixel){
    $scope.createMarkers(pixel);
    });        
}, true);


$scope.createMarkers = function(marker){
 console.log(marker.lat, marker.lng);
};

Console

85.363364 26.117482
88.363975 22.572765
79.844486 6.947216
47.849579 12.640338
32.317608 30.841705
14.523021 35.902973
15.898798 38.443573

Demo Fiddle

Hope it will help...