Angular Slider Code ändert die Dias nicht

Question

Ich verwende einen Bootstrap-Schieberegler mit dem HTML-Code und CSS. BUT die Folien werden nicht automatisch oder manuell geändert. unten ist der Code des Sliders.

(function($) { 
 

 
    //Function to animate slider captions 
 
    function doAnimations(elems) { 
 
     //Cache the animationend event in a variable 
 
     var animEndEv = 'webkitAnimationEnd animationend'; 
 

 
     elems.each(function() { 
 
      var $this = $(this), 
 
       $animationType = $this.data('animation'); 
 
      $this.addClass($animationType).one(animEndEv, function() { 
 
       $this.removeClass($animationType); 
 
      }); 
 
     }); 
 
    } 
 

 
    //Variables on page load 
 
    var $myCarousel = $('#carousel-example-generic'), 
 
     $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']"); 
 

 
    //Initialize carousel 
 
    $myCarousel.carousel(); 
 

 
    //Animate captions in first slide on page load 
 
    doAnimations($firstAnimatingElems); 
 

 
    //Pause carousel 
 
    $myCarousel.carousel('pause'); 
 

 

 
    //Other slides to be animated on carousel slide event 
 
    $myCarousel.on('slide.bs.carousel', function (e) { 
 
     var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']"); 
 
     doAnimations($animatingElems); 
 
    }); 
 
    $('#carousel-example-generic').carousel({ 
 
     interval:3000, 
 
     pause: "false" 
 
    }); 
 

 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css"> 
 

 
<div id="first-slider"> 
 
    <div id="carousel-example-generic" class="carousel slide carousel-fade"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
    </ol> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <!-- Item 1 --> 
 
     <div class="item active slide1"> 
 
     <div class="row"> 
 
      <div class="container"> 
 
      <div class="col-md-3 text-right"> 
 
       <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/pfmmo6qj1/window_domain.png"> 
 
      </div> 
 
      <div class="col-md-9 text-left"> 
 
       <h3 data-animation="animated bounceInDown">Add images, or even your logo!</h3> 
 
       <h4 data-animation="animated bounceInUp">Easily use stunning effects</h4> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- Item 2 --> 
 
     <div class="item slide2"> 
 
     <div class="row"> 
 
      <div class="container"> 
 
      <div class="col-md-7 text-left"> 
 
       <h3 data-animation="animated bounceInDown"> 50 animation options A beautiful</h3> 
 
       <h4 data-animation="animated bounceInUp">Create beautiful slideshows </h4> 
 
      </div> 
 
      <div class="col-md-5 text-right"> 
 
       <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/sp11uneml/rack_server_unlock.png"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- Item 3 --> 
 
     <div class="item slide3"> 
 
     <div class="row"> 
 
      <div class="container"> 
 
      <div class="col-md-7 text-left"> 
 
       <h3 data-animation="animated bounceInDown">Simple Bootstrap Carousel</h3> 
 
       <h4 data-animation="animated bounceInUp">Bootstrap Image Carousel Slider with Animate.css</h4> 
 
      </div> 
 
      <div class="col-md-5 text-right"> 
 
       <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- Item 4 --> 
 
     <div class="item slide4"> 
 
     <div class="row"> 
 
      <div class="container"> 
 
      <div class="col-md-7 text-left"> 
 
       <h3 data-animation="animated bounceInDown">We are creative</h3> 
 
       <h4 data-animation="animated bounceInUp">Get start your next awesome project</h4> 
 
      </div> 
 
      <div class="col-md-5 text-right"> 
 
       <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- End Item 4 --> 
 

 
    </div> 
 
    <!-- End Wrapper for slides--> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <i class="fa fa-angle-left"></i> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <i class="fa fa-angle-right"></i> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

<!doctype html> 
<html ng-app="plunker" > 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"> </script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script> 
    <script src="app.js"></script> 

    <!-- adding css files --> 
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 

    </head> 
    <body> 
      <div class="container" ng-controller="CarouselCtrl"> 
       <div class="offsetspan6"> 
        <carousel interval="myInterval"> 
          <slide ng-repeat="slide in slides" active="slide.active"> 
           <img class="image-circle" ng-src="{{slide.image}}" style="margin:auto;"/> 
         <div class="carousel-caption"> 
          <h4>Slide {{$index}}</h4> 
          <p>{{slide.text}}</p> 
         </div> 
         </slide> 
       </carousel> 
      </div> 
    </div> 
    </div> 
    </body> 
<script type="text/javascript"> 
    //angular.module('myApp', ['ui.bootstrap']); 
var app = angular.module('plunker', ['ui.bootstrap']); 


// Controller for Carousel 
function CarouselCtrl($scope) { 

// initializing the time Interval 
    $scope.myInterval = 1000; 

// Initializing slide rray 
$scope.slides = [ 
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Cute Fish'}, 

{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image2'}, 
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Swordtail%20PIX/Xiphophorus%20helleriAQ%20Hifin%20Black%20males.jpg',text:'Image3'}, 
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image4'} 
         ]; 

    var slides = $scope.slides; 
    console.log(slides); 

} // Controller Ends here 
</script> 
</html>