Why does ng-mouseover and ng-mouseleave not work on my chart container?

plotly.js
1

Hello,

I’m trying to implement ng-mouseover and ng-mouseleave on my chart container in my AngularJS application but neither are working. Here is my code:

<div ng-if="dataReady" id="scatter-plot-chart" ng-mouseover="mouseOver(true)" ng-mouseleave="mouseOver(false)"></div>

controller: function ($scope) {
...
$scope.isMouseOver = false;
$scope.mouseOver = function(isMouseOver) {
	console.log('in mouseOver()');
	$scope.isMouseOver = isMouseOver;
}
...
}

My console.log doesn’t print to the console when I hover over the chart and my breakpoint, which I place inside the function, doesn’t get hit.

I thought maybe the injection of the chart into the container might be effecting things but when I inspect the DOM I see the ng-mouseover and ng-mouseleave still there:

div in DOM
div in DOM1170×68 5 KB

Can someone tell me what I’m doing wrong?