title: Bootstrap Carousel not sliding at start
body: <p>I implemented a bootstrap carousel, which works quite nice, as long as I click at start on the next arrow. Then it starts sliding automatically. If I dont click anything, it just does not start. What can be the problem?
  I read a lot of posts, tried different things:</p>
  
  <ul>
  <li>adjusted jquery version: tried from 1.7.1 to 1.9.1, no changes</li>
  <li>looked at my included .js files, checked if they got the right order</li>
  <li>compared html code to the bootstrap example</li>
  </ul>
  
  <p>In the end, I did not find out the error.</p>
  
  <p>My html code looks like that in the end after the page is loaded:</p>
  
  <pre><code>&lt;div class="span9 ng-scope"&gt;
  &lt;h2&gt;Test Heading&lt;/h2&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
  
      &lt;!-- Carousel Items --&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;!-- ngRepeat: headline in headlines --&gt;&lt;div ng-class="{active: headlines.indexOf(headline) == 0}" class="item ng-scope active" ng-repeat="headline in headlines"&gt;
              &lt;img ng-src="img/partials/home/headings/1112.jpg" alt="" src="img/partials/home/headings/1112.jpg"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;a href="#willkommen/neuigkeiten/1" title="Mehr"&gt; &lt;h4 class="ng-binding"&gt;Test&lt;/h4&gt; &lt;/a&gt;
                  &lt;p class="ng-binding"&gt;
                      Test2
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;div ng-class="{active: headlines.indexOf(headline) == 0}" class="item ng-scope" ng-repeat="headline in headlines"&gt;
              &lt;img ng-src="img/partials/home/headings/1113.jpg" alt="" src="img/partials/home/headings/1113.jpg"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;a href="#willkommen/neuigkeiten/2" title="Mehr"&gt; &lt;h4 class="ng-binding"&gt;Test&lt;/h4&gt; &lt;/a&gt;
                  &lt;p class="ng-binding"&gt;
                      Test2
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Carousel Navigation --&gt;
      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My source html code:</p>
  
  <pre><code>&lt;h2&gt;Test Heading&lt;/h2&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
  
      &lt;!-- Carousel Items --&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div ng-class="{active: headlines.indexOf(headline) == 0}" class="item" ng-repeat="headline in headlines"&gt;
              &lt;img ng-src="img/partials/home/headings/{{headline.image}}.jpg" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;a href="#willkommen/neuigkeiten/{{headline.id}}" title="Mehr"&gt; &lt;h4&gt;{{headline.header}}&lt;/h4&gt; &lt;/a&gt;
                  &lt;p&gt;
                      {{headline.body|truncate:100}}
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Carousel Navigation --&gt;
      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Includes for the scripts in the index.html:</p>
  
  <pre><code>&lt;script src="lib/angular/angular-1.0.6.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular/angular-1.0.6-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/jquery/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/twitter-bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/namespace.js"&gt;&lt;/script&gt;
  &lt;script src="js/services.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="js/routes.js"&gt;&lt;/script&gt;
  &lt;script src="js/filters.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/style.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap.min.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap-responsive.min.css" /&gt;
  </code></pre>
  
  <p>Versions:</p>
  
  <ul>
  <li>jQuery 1.9.1 </li>
  <li>AngularJS 1.0.6 </li>
  <li>Bootstrap 2.3.1</li>
  </ul>
  
  <p>Any help is really appreciated.</p>
  
  <p>EDIT:
  The problem was, that the jquery lib was included after angular js. As I switched it, it worked...</p>