title: UI bootstrap carousel first slide doesn't show then crashes at last slide
body: <p>I am trying to implement ui-bootstraps carousel but when the page loads the first image doesn't show but the controls and indicators do. </p>
  
  <p>Then, when the second image shows, I can use the controls to go back to the first image and it will show fine. I can use the controls to get to the last slide or let it slide automatically but when I get to the last slide the carousel stops working and gives the error "Cannot read property 'slide' of undefined" which points to line 576 of the ui-bootstrap-tpls.js file.</p>
  
  <p>Not sure what I'm doing wrong as this seems pretty simple to implement, here is my code and here is a link to a site with a live example of whats going on .</p>
  
  <p><a href="http://test.codebyjordan.com" rel="noreferrer"><strong>Example Site</strong></a></p>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div class="slider"&gt;
    &lt;uib-carousel active="active" interval="3000"&gt;
      &lt;uib-slide ng-repeat="slide in home.slides track by slide.id" index="slide.id"&gt;
        &lt;img class="img-responsive" ng-src="{{slide.img}}" alt="{{slide.alt}}"&gt;
      &lt;/uib-slide&gt;
    &lt;/uib-carousel&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>.controller('HomeCtrl', function() {
    var vm = this;
  
    vm.slides = [
      {id: "1", img: 'img/slider/customer.jpg', alt: 'customers'},
      {id: "2", img: 'img/slider/juices.jpg', alt: 'e-juice'},
      {id: "3", img: 'img/slider/lineup.jpg', alt: 'vaporizers'},
      {id: "4", img: 'img/slider/vapeon.jpg', alt: 'vape on'}
    ];
  };
  </code></pre>
  
  <p><strong>*edit</strong></p>
  
  <p>I tried out the regular bootstrap carousel and it works fine. I can use it instead to solve the problem but I'd rather figure out what I'm doing wrong with the ui-bootstrap carousel. </p>