AngularJS Leaflet $ scope.markers directive does not update when dragging

Question

I am using AngularJS with the Leaflet Directive.

To pass markers to a directive, I use a service, and it works well.

Tokens are stored in $ scope.markers , as I expect.

However, when I drag the marker to the value of $ scope.markers, where it is not updated, so I added an observer to view, for example:

$scope.$watch("markers", function(newValue, oldValue) { $log.info($scope.markers.m1); }); 

When I update tokens from the main controller, I see that they are updated. When dragging and dropping, they weren’t there, so I changed the directive to include markData with the passed event to dragend, however I'm surprised that I need to change the angular -leaflet directive to get the desired results.

In the MapController and in the controller that created the tokens, I added:

 $scope.$on('leafletDirectiveMarker.dragend',function (e,marker) { var markerName=marker.markerName $scope.markers[markerName]=marker.markerData }); 

Now this works fine, but I cannot help thinking that I am doing it wrong.

Answer 1

How did you add the markers array to your area? On the example page, you need to expand the scope by calling angular.extend($scope, {...});

http://tombatossals.imtqy.com/angular-leaflet-directive/#!/examples/dragging-markers (in the javascript angular controller tab)