title: fading content in a carousel with angular
body: <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>