How to dynamically change the content in the slick control?

[idvorkin]

I'd like to change the content of the slick control dynamically. So in the below snippet, when I change Antidotes I expect the slick control to be updated:

        <slick autoplay=false>
            <div ng-repeat="antidote in Antidotes">
                {{antidote}}
            </div>
        </slick>

However, when Antidote changes nothing happens. Looking at the slick documentation, perhaps there should be code like this somewhere:

$('.js-add-slide').on('click', function() {
  slideIndex++;
  $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});

Is there a way to get dynamic content working in angular-slick? How are others working around this?

[Kenishi]

The only method I have found that has worked is using an ng-if on the slick directive and flipping that when you need to retrigger the rebuild. It seems that slicking the ng-repeat breaks angular's ability to properly update. Jquery and Angular do not play well together.

See this: http://plnkr.co/edit/WCEWwgNcIEC0rseaZIO6?p=preview (found here: http://stackoverflow.com/a/25117450 )

[chrisguerrero]

+1

Any word on this?

[rivvid]

@Kenishi 's solution worked for me - feels kinda hacky, but it worked.

[charl-kruger]

@Kenishi Also only working solution I have found trying to re-initialize the carousel.

Thank you