title: Angularjs ng-repeat rendering more items than are in the array
body: <p>I currently have the following code: </p>
  
  <pre><code>    &lt;div class="carousel" ng-if="novedadesEmpleados.cumpleanosDeHoy.length"&gt;
              &lt;div ng-repeat="empleado in novedadesEmpleados.todaysBirthdays" carousel-renderer class="event-card"&gt;
  
                  &lt;birthday-card empleado="empleado" card-notifier&gt;&lt;/birthday-card&gt;
  
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Which used to work fine until I changed from using Bootstrap Carousel to <a href="https://github.com/ganlanyuan/tiny-slider" rel="nofollow noreferrer">Tiny Slider</a>. </p>
  
  <p>The array currently has 2 elements in it, however the HTML is rendering 6, 4 oh which are just showing the default angularjs text (name of properties in curly brackets) and the other 2 are displaying the correct information. </p>
  
  <p>What could be causing this? The two directives are used to call the Tiny Slider initializer after they're done rendering: </p>
  
  <pre><code>angular.module('PortalIntranet').directive('cardNotifier', function ($timeout) {
      return function(scope, element, attrs){
          if(scope.$last)
              scope.$emit('FinishedRendering'); 
      }
  });
  
  angular.module('PortalIntranet').directive('carouselRenderer', function ($timeout) {
      return function (scope, element, attrs) {
          scope.$on('FinishedRendering', function (event) {
              var slider = tns({
                  container: '.card-slider',
                  autoplay: true,
                  slideBy: 'page',
                  autoplayTimeout: 3500,
                  speed: 750,
                  autoplayButton: false,
                  nav: false,
                  autoplayButtonOutput: false,
                  controls: false
              });
              console.log(slider);
          });
      }
  });
  </code></pre>