fading content in a carousel with angular
<p>I am new to angular and am trying to figure it out, though I'm now stuck on animating content inside a content based carousel. I've built this carousel myself, but I didn't consider how fading content between "slides" would play into this beforehand. </p>

<p>Currently the structure of my carousel is:</p>

<pre><code>&lt;article class="container-fluid carousel-container" ng-controller="carouselController"&gt;
    &lt;div class="container"&gt;
        &lt;div class="prev-container"&gt;
            &lt;button class="prev" ng-click="prevSlide()"&gt;&lt;span&gt;&amp;lsaquo;&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="slide"&gt;
            &lt;div class="slide-left"&gt;
                &lt;h1 class="slide-inner" ng-cloak&gt;{{panels[slide].title}}&lt;/h1&gt;
                &lt;p class="slide-inner" ng-cloak&gt;{{panels[slide].body}}&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="next-container"&gt;
            &lt;button class="next" ng-click="nextSlide()"&gt;&lt;span&gt;&amp;rsaquo;&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/article&gt;
</code></pre>

<p>Instead of having actual slides, I am simply changing the content of a single 'slide'. Later on I'll be adding images in a <code>slide-right</code> container. </p>

<p>The functionality for this resides in the <code>carouselController</code>:</p>

<pre><code>app.controller('carouselController', function($scope){
    $scope.slide = 0;
    $scope.prevSlide = function(){
        if ($scope.slide &lt;= 0) {
            $scope.slide = ($scope.panels.length - 1);
        } else {
            $scope.slide--;
        };
    };
    $scope.nextSlide = function(){
        if ($scope.slide &gt;= $scope.panels.length - 1) {
            $scope.slide = 0;
        } else {
            $scope.slide++;
        };
    };
    $scope.panels = [
        {
            id: 1,
            title: "1 - Lorem ipsum",
            body: "1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, dolores voluptas quod fuga id nihil in! Dolore accusantium perferendis deleniti voluptate, libero quis at molestias."

        },
        {
            id: 2,
            title: "2 - Lorem ipsum",
            body: "2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, dolores voluptas quod fuga id nihil in! Dolore accusantium perferendis deleniti voluptate, libero quis at molestias."
        },
        {
            id: 3,
            title: "3 - Lorem ipsum",
            body: "3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, dolores voluptas quod fuga id nihil in! Dolore accusantium perferendis deleniti voluptate, libero quis at molestias."
        }
    ];
});
</code></pre>

<p>The basic idea here is that the content is populated from the <code>panels</code> array, and clicking the next button or prev button will increment or decrement the array index, respectively. This then populates the title and body content inside the <code>slide-left</code> div. The issue I am having is when the next or prev button is used, i want to fade out the content that is there, and fade in new content. I have tried <code>addClass</code> and <code>removeClass</code>, and many other methods with no results. The biggest roadblock has been the fact that I am not actually changing slides and just content as most resources and tutorials assume I am hiding one slide, and revealing the next. I look forward to your suggestions and appreciate your help, and feel free to criticize my existing code.</p>