Slick Carousel in angular js on json data not working

Question

I user this programme github.com/vasyabigi/angular-slick . it is not working with dynamic data. it work only with static data. In dynamic data it show vertical image insted of horizontal with no Carouseling .Please help me. here is my diractive

directive('slick',function($timeout) {  return {
restrict: "AEC",
scope: {
  initOnload: "@",
  data: "=",
  currentIndex: "=",
  accessibility: "@",
  arrows: "@",
  autoplay: "@",
  autoplaySpeed: "@",
  centerMode: "@",
  centerPadding: "@",
  cssEase: "@",
  dots: "@",
  draggable: "@",
  easing: "@",
  fade: "@",
  infinite: "@",
  lazyLoad: "@",
  onBeforeChange: "@",
  onAfterChange: "@",
  onInit: "@",
  onReInit: "@",
  pauseOnHover: "@",
  responsive: "&",
  slide: "@",
  slidesToShow: "@",
  slidesToScroll: "@",
  speed: "@",
  swipe: "@",
  touchMove: "@",
  touchThreshold: "@",
  vertical: "@"
},
link: function(scope, element, attrs) {
  var initializeSlick, isInitialized;
  initializeSlick = function() {
    return $timeout(function() {
      var currentIndex, slider;
      slider = $(element);
      if (scope.currentIndex != null) {
        currentIndex = scope.currentIndex;
      }
      slider.slick({
        accessibility: scope.accessibility !== "false",
        arrows: scope.arrows !== "false",
        autoplay: scope.autoplay === "true",
        autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000,
        centerMode: scope.centerMode === "true",
        centerPadding: scope.centerPadding || "50px",
        cssEase: scope.cssEase || "ease",
        dots: scope.dots === "true",
        draggable: scope.draggable !== "false",
        easing: scope.easing || "linear",
        fade: scope.fade === "true",
        infinite: scope.infinite !== "false",
        lazyLoad: scope.lazyLoad || "ondemand",
        onBeforeChange: scope.onBeforeChange || null,
        onAfterChange: function(sl, index) {
          if (scope.onAfterChange) {
            scope.onAfterChange();
          }
          if (currentIndex != null) {
            return scope.$apply(function() {
              currentIndex = index;
              return scope.currentIndex = index;
            });
          }
        },
        onInit: function(sl) {
          if (scope.onInit) {
            scope.onInit();
          }
          if (currentIndex != null) {
            return sl.slideHandler(currentIndex);
          }
        },
        onReInit: scope.onReInit || null,
        pauseOnHover: scope.pauseOnHover !== "false",
        responsive: scope.responsive() || null,
        slide: scope.slide || "div",
        slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1,
        slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1,
        speed: scope.speed != null ? parseInt(scope.speed, 10) : 300,
        swipe: scope.swipe !== "false",
        touchMove: scope.touchMove !== "false",
        touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5,
        vertical: scope.vertical === "true"
      });
      return scope.$watch("currentIndex", function(newVal, oldVal) {
        if ((currentIndex != null) && (newVal != null) && newVal !== currentIndex) {
          return slider.slickGoTo(newVal);
        }
      });
    });
  };
  if (scope.initOnload) {
    isInitialized = false;
    return scope.$watch("data", function(newVal, oldVal) {
      if ((newVal != null) && !isInitialized) {
        initializeSlick();
        return isInitialized = true;
      }
    });
  } else {
    return initializeSlick();
  }
}  };});

Answer 1

There's an attribute called init-onLoad, just make it true.

<slick init-onload=true data="awesomeThings">
  ...
</slick>

Answer 2

Just in case using below settings didn't work for you.

init-onload=true data="awesomeThings"

Use this instead.

ng-if="awesomeThings.length"