Carousel does not advance during autoplay (or with arrow click)

[JakobJingleheimer]

I'm using ui-bootstrap-tpls.js, and the carousel is not autoplaying.

<div
    data-ng-if="slides"
    data-carousel
    data-disable-ng-animate="true"
    data-interval="interval">
    <div
        class="slide"
        data-slide
        data-ng-repeat="slide in slides"
        data-active="slide.active">
        <img data-ng-src="{{slide}}" />
    </div>
</div>

disable-ng-animate is a custom directive i created to address #1273

Whilst walking through the carousel module in Chrome's debugger, it appears the problem occurs on line 492 and 495:

$scope.next = function() {
    var newIndex = (currentIndex + 1) % slides.length;

    //Prevent this user-triggered transition from occurring if there is already one in progress
    if (!$scope.$currentTransition) {
        return self.select(slides[newIndex], 'next');
    }
};

newIndex is not changing from cycle to cycle: I have 3 slides, and it starts on slide 2 and gets stuck.

Then, it never enters self.select() to advance the slide--unless I manual click a different pip/indicator, and then it changes to that slide but doesn't advance any more. In all cases, the timeout continues to cycle.

[JakobJingleheimer]

The problem is that data-disable-ng-animate must be on the parent of the carousel:

<div data-disable-ng-animate="true">
    <div
        data-ng-if="slides"
        data-carousel
        data-interval="interval">
        <div
            class="slide"
            data-slide
            data-ng-repeat="slide in slides"
            data-active="slide.active">
            <img data-ng-src="{{slide}}" />
        </div>
    </div>
</div>

[joshkurz]

can you share the data-disable-ng-animate directive you have created?

[JakobJingleheimer]

'use strict';

// apply to the parrent of the element you want
// angular animations to be disabled on

// source: https://github.com/angular-ui/bootstrap/issues/1350

angular.module('dragonAgeApp')
.directive('disableNgAnimate',
    ['$animate', function ($animate) {
        return {
            link: function ($scope, $element, $attrs) {

                $scope.$watch(
                    function() {
                        return $scope.$eval($attrs.setNgAnimate, $scope);
                    },
                    function(newVal) {
                        $animate.enabled(!!newVal, $element);
                    }
                );
            }
        };
    }]
);