ng-animate calls stack up, execute in later events

Question

The desired behavior is to click on an image, and have the <div> ease out to full height over 1 second. When the image is clicked again, I need the <div> to ease back in to hidden state in 1 second.

What happens now:

• Clicking on the image makes the <div> show up immediately, with no transition.
• Clicking again makes the <div> hide after two seconds. No transition when hiding.

My directive's JS:

.directive('gigDetails', ['$animator', function factory($animator) {
    return {
        restrict: 'A',
        templateUrl: 'partials/gigdetails.html',
        replace: false,
        transclude: false,

        scope: {
            gigId: '@'
        },

        controller: function ($scope) {
            $scope.expandedObjectTracker = {};
        },

        compile: function (tElement, tAttrs) {
            tElement.hide();

            return function link (scope, element, attrs) {
                var animator = $animator(scope, attrs);
                var gigId = scope.gigId;

                var startGigAction = function () {
                    var expandedObject = scope.expandedObjectTracker;
                    if (!expandedObject.openNow) {
                        // not open, open it!
                        animator.show(element);
                        expandedObject.openNow = true;
                    } else {
                        animator.hide(element);
                        expandedObject.openNow = false;
                    }
                };

                element.prev('.gridThumb').on('click', startGigAction);
            }
        },
    };
}]);

Calling it in HTML:

<li ng-repeat="gig in gigs">
    <img ng-src="{{ homeURL + '/' + gig.imgURL }}" class="gridThumb" id="{{ 'gigThumb' + gig.gigId }}">
    <div 
        class="gigDetailsContainer" 
        gig-details 
        gig-id="{{ gig.gigId }}" 
        ng-animate="'gig-container'"
    >
    </div>
</li>

CSS definition:

/* angular transitions */
.gig-container-show, .gig-container-hide {
    -webkit-transition:height 1s ease;
    -moz-transition:height 1s ease;
    -o-transition:height 1s ease;
    transition:height 1s ease;
}

What am I doing wrong?