AngularJS旋转木马滑块（每个图像之间的屏幕闪烁）

Question

我的旋转木马滑块无法正常工作。导航栏，箭头和指示器均在每次图像加载之间浮动到顶部。每个图像之间都会出现闪烁的外观。我如何防止这种情况发生？即使我单击向左箭头，图像也始终从右向左移动。但是重要的是元素在每个图像之间都移到顶部。非常感谢任何想法。
templateurl.html

<div id ="myCarousel"class="carousel slide" class ="item" data-ride="carousel">

        <ol class ="carousel-indicators">
         <li data-target = "#myCarousel" ng-repeat="image in images"  ng-class="{active:isCurrentSlideIndex($index)}" data-slide-to="{{image}}"></li>
          </ol>
          <div class="carousel-inner">
            <div ng-class="{item: true, active: isCurrentSlideIndex($index)}"ng-repeat="image in images">
              <img class = "img" ng-src="images/{{currentFolder}}/{{image}}" alt="Slide number {{image}}">

    </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev()"><span class="glyphicon glyphicon-chevron-left"></span></a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next()"><span class="glyphicon glyphicon-chevron-right"></span></a>
      </div>
    </div>

Index.html

 <slider images="images"/>

app.js

var sliderApp=angular.module('sliderApp',['ngAnimate','ui.bootstrap']);

sliderApp.controller('SliderController', function($scope) {

  $scope.uri="images";
  $scope.folders =['cats','dogs'];
  $scope.images =["1.JPG","2.JPG","3.JPG"];
  $scope.currentFolder = $scope.folders[0];
  $scope.selectFolder = function(folder) {
    $scope.currentFolder=folder;
  };
  $scope.activeFolder = function(folder) {
    return (folder ===$scope.currentFolder);
  }
});


    sliderApp.directive('slider', function ($timeout) {
      return {

        link: function ($scope, elem, attrs) {

        $scope.currentIndex=0;

        $scope.next=function(){
          $scope.currentIndex<$scope.images.length- 1 ? $scope.currentIndex++ :$scope.currentIndex=0;
        };

        $scope.prev=function(){
          $scope.currentIndex >0 ?$scope.currentIndex-- : $scope.currentIndex=$scope.images.length -1;
        };

        $scope.isCurrentSlideIndex = function (index) {
                return $scope.currentIndex === index;
            };


        $scope.$watch('currentIndex',function(){
          $scope.images.forEach(function(image){
            image.visible=false;
          });
          $scope.images[$scope.currentIndex].visible=true;
        });

        /* Start: For Automatic slideshow*/

        var timer;

        var sliderFunc=function(){
          timer=$timeout(function(){
            $scope.next();
            timer=$timeout(sliderFunc,4000);
          },4000);
        };

        sliderFunc();

        $scope.$on('$destroy',function(){
          $timeout.cancel(timer);
        });

        /* End : For Automatic slideshow*/

        },
      templateUrl:'templates/templateurl.html'
      }
    });