Slick Carousel with Angular JS

I suspect that the slick plugin may need the DOM to be fully rendered to work properly.

Try:

myApp.directive('slickSlider',function($timeout){ return {   restrict: 'A',   link: function(scope,element,attrs) {     $timeout(function() {         $(element).slick(scope.$eval(attrs.slickSlider));     });   } }}); 

$timeout still didn't give the data enough time to initialise for my scenario so I modified the directive a bit more to watch for the data to have content (this could also have the effect of rebinding whenever the data changes, not just once the DOM initializes onLoad, if you change the use of isInitialized):

app.directive('slickSlider', function () {    return {        restrict: 'A',        scope: {'data': '='},        link: function (scope, element, attrs) {            var isInitialized = false;            scope.$watch('data', function(newVal, oldVal) {                if (newVal.length > 0 && !isInitialized) {                    $(element).slick(scope.$eval(attrs.slickSlider));                    isInitialized = true;                }            });        }    }});

This way angularJS watches for the data to be loaded and only hooks up the slick when data has length.

(btw $watch is necessary, instead of $observe, because "data" attribute doesn't use interpolation ( "{{...}}" ): Take a look at this great answer if you want to get the low-down on this.)

usage:

<div class="clearfix" data="slides"     slick-slider="{dots: false,                   arrows: true,                   draggable: false,                   slidesToShow:3,                   infinite:false}">    <div class="my-slide" ng-repeat="slide in slides">        <a><img ng-src="assets/img/{{slide.img}}"/></a>    </div></div>

thanks to this so answer and this github that I got to from this so question