title: Jquery masonry Infinite scroll appended
body: <p>I am using jquery masonry in angularjs with infinite scroll, its working good. Only the problem is I want to append masonry to next element and and currently it is getting applied to all items. I come through the method appended, but as I am using masonry infinite scroll its not giving me how to do that.
  consider code:</p>
  
  <pre><code>&lt;div infinite-scroll='items.nextPage()' infinite-scroll-disabled='items.busy' infinite-scroll-distance='1'&gt;
      &lt;div class="tiles" ng-repeat="item in items.item" on-finish-render="ngRepeatFinished"&gt;
          &lt;div&gt;
              &lt;img ng-src="{{item.url}}" alt="{{item.itemName}}" &gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent){
      var $container = $('#masonry-tiles').masonry({
          //TODO: Once the way to implement the width classes to the masonry divs is figured out the columnWidth will be changed from 66 to grid-sizer
          columnWidth: 150,
          itemSelector: '.tiles'
      });
      $container.imagesLoaded( function() {
  
          console.log('All images load');
          if($rootScope.infiniteScroll){
  
              console.log('Second time');
              $container.masonry('prepended');
          }else{
  
              console.log('First Time');
              $container.masonry();
          }
      });
  });
  </code></pre>
  
  <p>and to append next elements I am using normal blogs to implement. Any suggestion.
  Thanks.</p>