Why doesn't the ng-mouseenter directive fire on elements created by the ng-if directive?

Question

Angular

Good afternoon.
Together with AngularJS, SVG is used.
A number of circles are drawn in the SVG.

<defs>
    <g id="test"> 
      <circle cx="0" cy="20" r="20"/>
    </g>
  </defs>
<g ng-repeat="node in nodes" ng-mouseenter="focusIn()" ng-mouseleave="focusOut()">
      <g ng-if="visible">
         <ellipse id="2" cx="20" cy="0" rx="20" ry="20" />
         <g >
            <use id="3" xlink:href="#test" x="0" y="0" /> 
         <g/>
      <g/>
   <circle id="1" cx="0" cy="0" r="20"/>
</g>

**************
$scope.visible = false;
$scope.focusIn=function() {
$scope.visible = true;
}
$scope.focusOut=function() {
$scope.visible = false;
}
The question is the following. We see circles (id=1). If we hover over one of them, then an ellipse (id=2) and a second circle (id=3) appear next to this circle. When you try to hover over the ellipse (id=2), nothing happens, i.e. it is perceived as a single entity with the circle (id=1). But if we hover over a circle (id=3), then the ellipse and this circle disappear, because the ng-mouseleave directive is triggered.
How can I make ng-mouseenter react to the circle (id=3) as well?
I apologize if the question was a little unclear.

Answer 1

And it seems this is a problem specifically with the use tag. jQuery are you using?

Answer 2

I may be wrong, but I see the situation like this: Your
shapes id=1, id=2, id=3 , in theory, should be "one whole", since they are united by a common parent, for which mouseenter/mouseleave are set , and in the case of id=1 and id=2 , we see similar behavior; logically, the figure id=3 should have the corresponding behavior, i.e. when hovering over it, mouseenter shouldn't fire (it already fired when you hovered the mouse over the id=1 shape ) just shouldn't fire mouseleave either .
Perhaps this is due to geometry, and will help in <use>setting the necessary coordinates instead of x=0 y=0 , putx=0 y=20 , and <defs>do not set coordinates for the shape.
Or maybe mouseleave works because the shape is taken from outside, and it will work in any case (although, logically, it should not).

Answer 3

jQuery didn't want to use it yet.
iCat correctly noticed that mouseenter has already worked.
The question is how to make it so that mouseleave does not work when hovering over a figure with id=3. (chueyu considered this one with the figure id=1)

Answer 4

Perhaps in this case you need ng-mouseover, not ng-mouseenter