MouseEnter vs MouseOver in AngularJs

I was playing with AngularJS mouse events and got into a problem. I know MouseEnter event is fired when mouse enters container of an element and there after MouseOver is fired for all child elements. Thanks to this animation Visualizing mouse events

However turns out that in my case MouseEnter event is never fired. I am working on Angular PhoneCat application (step-10) and did following modifications:

1. Controllers.js: Added a method to log mouse events


2. phone-details.html: Added ng-mouseenter and ng-mouseleave handlers

    $scope.logMouseEvent = function() {
        switch (event.type) {
          case "mouseenter":
            console.log("Hey Mouse Entered");
            break;

          case "mouseleave":
            console.log("Mouse Gone");
            break;

          default:
            console.log(event.type);
            break;
        }

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-Click="setImage(img)" ng-mouseenter="logMouseEvent()" ng-mouseleave="logMouseEvent()">
  </li>
</ul>

Result:

Only mouseover and mouseout event being logged

Question:

Is this behavior happening because images are ul element and we are moving mouse in child elements? and How can I get mouseenter event on image?

Thank you