Leaflet circleMarker event not working when used along with leaflet.heat

Question

I am using ui-leaflet for our angular project. We also have leaflet.heat to create heat maps.

The issue is whenever the data is updated the event on circle markers stops working.

Other minor issue I am facing is the heat map doesn't update unless I use timeout. Not sure what am I doing wrong, any help is appreciated.

I have created a sample jsfiddle. http://jsfiddle.net/srs/13s1fy02/2/

heatMapData = [
    [60.265625, -121.640625], [60.671875, -96.328125]
]
heatMapData_1 = [
    [37.265625, -121.640625], [38.671875, -96.328125]
]

circleData = {
  'features': [
    {
      'geometry': {
        'type': 'Point',
        'coordinates': [-120.9998241, 39.7471494]
      },
      'type': 'Feature',
      'properties': {
        'popupContent': 'This is popup 1'
      }
    }
  ]
};
circleData_1 = {
  'features': [
    {
      'geometry': {
        'type': 'Point',
        'coordinates': [-100.9998241, 39.7471494]
      },
      'type': 'Feature',
      'properties': {
        'popupContent': 'This is popup2'
      }
    }
  ]
};
onEachFeature = function(feature, layer) {
  return layer.bindPopup(feature.properties.popupContent);
};
$scope.updateData = function() {
  if($scope.layers.overlays.hasOwnProperty('heat')){
            delete $scope.layers.overlays['heat'];
  }

  $scope.geojson = {};
  //setTimeout(function(){ buildMap(heatMapData_1, circleData_1) }, 300);
    buildMap(heatMapData_1, circleData_1);
}


buildMap = function(heatMapData, circleData){
    $scope.geojson = {
    data: circleData,
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng) {
      return L.circleMarker(latlng, style);
    }
        };
  $scope.layers.overlays = {
    heat: {
      name: 'Heat Map',
      type: 'heat',
      data: heatMapData,
      layerOptions: {
        radius: 10,
        scaleRadius: true,
        maxZoom: 7,
        minOpacity: .5,
        max: 1,
        gradient: {
          .4: 'green',
          .6: 'yellow',
          1: 'red'
        }
      },
      visible: true
    }
  };
}
buildMap(heatMapData, circleData)

Answer 1

As for the reason why you cannot click on your Circle Marker when your heat map is on, it is probably just a matter of SVG elements stacking: the heat map is drawn after the Circle Marker and covers the whole map, hence you can no longer mouse interact with the marker.

You can trigger the issue by simply hiding and showing again your heat map overlay (not even need to update).