add/remove carousel items during runtime within an Angular app

Folks: building a simple Angular app consisting of a page with thumbnails - each thumbnail contains a 'star this' link. You click the star, the thumbnail appears within a carousel in the header and vice versa when you click off the star.

Issue: I've been looking into angular carousels such as cardflow, slick carousel and flexsider but having problems when dynamically adding new slide items into the carousel.

Template:

<div class="carousel-container">
   <slick dots="true" center-mode="true" infinite="true" speed="300" slides-to-show="2" touch-move="false" slides-to-scroll="1">
      <div class="slider" ng-repeat="file in myLocalRepoStarred" ng-if="file.event.starred == 1" >
          <img class="carousel-img" ng-src="docs/{{file.event.id}}/{{file.event.dl_thumb}}"/>
      </div>
  </slick>
</div>

Basically, when a thumbnail is 'starred', a custom directive is used with an on click which updates the $scope object myLocalRepoStarred setting a property starred to 1. Changes to $scope are applied then picked up in the template..

Question: When the new slide item gets added within ng-repeat, it messes with the carousel layout, styling etc because it hasn't got the appropriate classes, attributes applied (as these get added when the page initially loads).

Has someone faced a similar problem? If so, how did you get around it? Are there any more suitable plugins to achieve this?

edit: see comment below for the eventual fix..