title: Push to array with angular-flickity and flickity
body: <p>I am using ng-repeat on 3 elements, I want to push a dynamic item every 30 seconds,</p>
  
  <p>the problem is that when I push an element to the array, the carousel get stuck and not reflect the current state of items in the ng-repeat.</p>
  
  <p>The solution that I found is:</p>
  
  <p>1.Destroy current carousel using FlickityService.</p>
  
  <p>2.Push new elements to array.</p>
  
  <p>3.Recreate the carousel using FlickityService.</p>
  
  <p>The problem with the above workaround is that it is very clanky and demand destruction of DOM elements and recreating it over and over again-very expensive solution.
  I have simulate this problem with current codepen:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['bc.Flickity']);
  
  app.controller('MyController', function($scope,FlickityService,$document,$interval){
      var counter = 4;
      $scope.myCustomOptions = {
        cellSelector: '.carousel-cell',
        initialIndex: 1,
        prevNextButtons: true,
      };
    
      $scope.items = [{
        Name: "Name1"
      },{
        Name: "Name2"
      },{
        Name: "Name3"
      }];
    
    angular.element($document[0]).ready(() =&gt; {
       var element =             angular.element(document.getElementById('carousel-container'));
  
      // Initialize our Flickity instance
      FlickityService.create(element[0], element[0].id,$scope.myCustomOptions);
      
    });
    
    $interval(function(){
      $scope.items.push({Name:"Name"+counter});
    }, 30* 1000)
  
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-cell {
    width: 20%;
    height: 200px;
    margin-right: 5px;
    background: green;
    border-radius: 5px;
  }
  
  .carousel-cell:before {
    display: block;
    color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://rawgit.com/metafizzy/flickity/master/dist/flickity.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/metafizzy/flickity/master/dist/flickity.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/benjamincharity/angular-flickity/master/dist/angular-flickity.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="app" ng-controller="MyController"&gt;
    &lt;div id="carousel-container"&gt;
        &lt;div ng-repeat="item in items track by $index" class="carousel-cell"&gt;
          {{item.Name}}
        &lt;/div&gt; 
    &lt;/div&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The optimal solution in my opinion , is that flickity will get update instantly when I update my current array.</p>
  
  <p>I would be happy for any kind of help.</p>