AngularJS - ngMouseenter & ngMouseleave expanding image menu

I'm trying to create an expanding image menu like the jQuery Kwicks plugin - [login to view URL] , but am attempting to do it the Angular way (no jQuery dependency).

I have the following Plunker - [login to view URL]

Essentially the menu works (sort of), but when mousing over the items quickly I have noticed that:

- The last image gets cut off and pushed to the bottom, apart from the obvious CSS pushing it to the bottom each time, I assume this is happening because the animations aren't syncing correctly (if that is even possible in Angular)

- ng-animate class doesn't get removed on some or all of the elements, I assume this is happening as to many animations are attempting to fire at once and cancelling out one another.

In addition, I am using:

TweenMax

UI Router

FutureState resolve (ui-router-extras)

ngAnimate

I need to make this work better, help?

AngularJS JavaScript

Project ID: #6786535

About the project