Leaflet Label is not changing its position immediately after using leafletData service

[adel219]

I have a leaflet directive and I've added some markers to it through extending the scope with markers array.

$scope.markers.push({
          lat: lat,
          lng: lng,
          icon: $scope.bookedIcon5,
          label: {
            message: "# 1",
            options: {
              noHide: true
            }
          }
        })

I'm pushing a marker with its label and after the marker is added to map, I change its icon based on the zoom level - bigger marker for larger zoom value - the problem is that the label is not changing position after changing the icon of the marker so I had to use the leafletData serivce to change label position manually like this:

$scope.relocateMarkerLabels = function(){
      leafletData.getMarkers().then(function(markers) {
        angular.forEach(markers,function(value,key){
          if(value.label){
            value.label.setLatLng([value._latlng.lat+0.6,value._latlng.lng+0.1])
          }
        });
      });
    }

I'm calling that function when zooming event on map object occurs:

$scope.$on("centerUrlHash", function(event, centerHash) {
      $scope.map.center.zoom = centerHash.split(':')[2];
      $scope.resizeMarkers(); //function that changes the icons for markers after zooming
      $scope.relocateMarkerLabels()
      console.log("relocateMarkerLabels")
    });

What's happening is markers icons are changing and labels are staying in their original place until the next $digest of angular they change their position.

I'm relatively new to angular development not sure whether the way I'm following is right. Is it an issue or the way I'm using it is causing that.

versions: ui-leaflet: 1.0.2 2016-09-21 leaflet: 0.7