title: targeting a class for angular ng-show and ng-hide
body: <p>I have created a basic angular slider i am contemplating whether i show use <code>ng-class</code> or <code>ng-show</code> as it stands i am trying to create a fade transition on each json object change. </p>
  
  <p>i am currently using ng-show and ng-hide, i am struggling to a class to  achieved a css transition, is this even possible, secondly is it practice ? <a href="http://plnkr.co/edit/7ju6keOTWIdP8cCU3c11?p=preview" rel="nofollow">Plunkr</a></p>
  
  <pre><code>var timer;
  $scope.startAuto = function() {
      timer = $interval(function(){
          $scope.jobNotification = ($scope.jobNotification + 1) % $scope.jobs.length;
      }, 5000);
  };
  
  $scope.isActive = function (index) {
      return $scope.jobNotification === index;
  
   };
  
  $scope.showJobNotification = function (index) {
      if (timer){
          $interval.cancel(timer);
          $scope.startAuto();
      }
      $scope.jobNotification = index;
  };
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;ul class="tickrSlider"&gt;
              &lt;li data-ng-repeat="job in jobs" ng-class="{'jobActive' :isActive($index)}" ng-show="isActive($index)"&gt;
                  &lt;h1&gt;{{job.jobTitle}}&lt;/h1&gt;
                  &lt;p&gt;{{job.sector}}&lt;/p&gt;
                  &lt;a href="/"&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>