обратный вызов, когда анимация пользовательского интерфейса завершена

Я использую angular в приложении вместе с ui-router. Я хочу иметь возможность выполнить некоторый код, когда анимация пользовательского интерфейса будет завершена. Я читал, что $stateChangeSuccess должен иметь возможность добиться этого, но, похоже, он срабатывает перед каждой анимацией. На данный момент я использую $timeout со временем, равным продолжительности анимации. Я знаю, что это не очень хорошее решение. У кого-нибудь есть лучшее предложение, как это исправить?

Это мой код до сих пор (директива):

app.directive('lazyBackground', ['$timeout', function($timeout) {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            var img = new Image();

            img.onload = function() {

                element.css({
                    'background-image': 'url(' + this.src + ')'
                });

                element.addClass('lazy-loaded');
            }

            $timeout(function() {
                img.src = attrs.lazyBackground;
            },500);

        }
    }

}]);

Как вы можете видеть из кода, я пытаюсь лениво загрузить изображение ПОСЛЕ того, как новая анимация пользовательского интерфейса завершена.