Leaflet marker icon click event is not working

Question

I'm facing a problem with leaflet marker normally when i refresh the page the marker is clickable but when i come from another page marker is not clickable I try all the thing but did not find any solution.

JAVASCRIPT:

angular.extend($scope, {
center: {
    lat: 51.505,
    lng: -0.09,
    zoom: 8
},
markers: {},

});

mapService.getLocation(function(location) {
    $scope.center = {
        lat: location.lat,
        lng: location.long,
        zoom: 12
    };
    $scope.$digest($scope.center);
    mapService.getMarkers(
        new google.maps.LatLng(location.lat, location.long),
        document.getElementById('map'), ['school'],
        function(results) {
            results.forEach(function(marker) {
                var __location = marker.geometry.location.toJSON();
                $scope.markers[marker.id] = {
                    lat: __location.lat,
                    lng: __location.lng,
                    message: marker.name,
                    focus: false
                }
            });
            $scope.$digest($scope.markers);
        }
    )
});

HTML:

<leaflet
width="100%"
markers="markers"
lf-center="center">

[NOTE] I'm using leaflet(ver: "0.7.7") and angular-leaflet-directive(version: "0.10.0").

Answer 1

My problem is solved just by adding data-tap-disabled="true" parent tag of leaflet map