AngularJS text carousel directive

index.html

<div>
  I really like to <span text-carousel values="run, walk, bike, jog, eat, sleep, and drink"></span>.
</div>

text-carousel.js

app.directive('textCarousel', function ($timeout) {
    
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {

            var timeoutId,
                index = 0,
                values;

            values = attrs.values.split(',');

            function goToNextValue() {

                index += 1;

                if (index >= values.length) {
                    index = 0;
                }
            };

            function setCarouselText() {
                elem.text(values[index]);
            }

            function updateCarousel() {
                setCarouselText();
                goToNextValue();
                scheduleNext();
            };

            function scheduleNext() {
                timeoutId = $timeout(function () {
                    elem.fadeOut(200, function () {
                        $(this).text(values[index]).fadeIn(20);
                        updateCarousel();
                    });
                }, 2000);
            };

            updateCarousel();

            elem.on('$destroy', function () {
                $timeout.cancel(timeoutId);
            });
        }
    };

});