title: Onsen-ui dynamic carousel
body: <p>I'm trying to dynamically update a carousel when you get near the bottom.</p>
  
  <p>It's working but when the data is updated to add more rows (after the initial set) the carousel gets screwed up (wrong indexes, wont jump correctly).</p>
  
  <p>I'm certain this can be better, bit new to angular so forgive me, any help would be appreciated.</p>
  
  <p>js:</p>
  
  <pre><code>(function() {
      var rows=0;
      var app = angular.module('myApp', ['onsen']);
  
      function addrows($scope, $http){
          $http.get('/data').success(function(data) {
              angular.forEach(data, function(value, key) {
                  angular.element(document.getElementById('updatediv')).append("&lt;ons-carousel-item&gt;&lt;/ons-carousel-item&gt;");
                  rows++;
              });
              myCarousel.refresh();
          });
      }
  
      app.controller('DemoCtrl', function($scope, $http) {
          addrows($scope, $http);
  
          setTimeout(function(){
              myCarousel.on('postchange', function(){
                  if(myCarousel.getActiveCarouselItemIndex() == rows-2){
                  addrows($scope, $http);
                  }
              });
          }, 1000);
      });
  })();
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;ons-carousel var="myCarousel" id="updatediv"  style="width: 100%; height: 100%" direction="vertical" fullscreen="true" auto-scroll="true"&gt;&lt;/ons-carousel&gt;
  </code></pre>