Flash of un-initialized content with dynamic data about angular-slick HOT 6 OPEN

<div class="row">

<slick init-onload="true" infinite="false" slides-to-scroll="1" swipe-to-slide="true" touch-move="true"
touch-threshold="1000" dots="false" responsive="breakpoints" edge-friction="0" data="entries"
class="slider lazy" css-ease="linear" style="max-width:1024px; margin-bottom: 10px">

<div ng-repeat="entry in entries" class="untventry" style="position:relative;">
    <a href="#/entry/{{entry.linkName}}?list={{selectedCat.name}}">
    <div id="entry" class="mycontainer"> 
    <img id="entryimage" ng-src="{{entry.imageUrl}}" style="  -webkit-filter: grayscale(100%); filter:grayscale(100%)"/>

 scope: {
   ....
    prevArrow: '@',
    nextArrow: '@',
    // I'm not 100% sure these need to be '=' but this is what worked for me
    beforeLoad: '=',
    afterLoad: '='
 }
 link: function (scope, element, attrs) {     
   ....
   initializeSlick = function () {
        var currentIndex, customPaging, slider;
        slider = $(element);

        // Let the controller know we are about to slick it
        if(scope.beforeSlick) {
          scope.beforeSlick();
        }
      ....

      slider.on('afterChange', function (event, slick, currentSlide) {
          if (scope.onAfterChange) {
            scope.onAfterChange(slick, currentSlide);
          }

          if (currentIndex != null) {
            return scope.$apply(function () {
              currentIndex = currentSlide;
              return scope.currentIndex = currentSlide;
            });
          }
       });

        if(scope.afterSlick) { 
          // We call the callback in timeout to make sure everything has been slicked
          $timeout(function() {
            scope.afterSlick();
          });
        }

 slick(ng-if="dataLoaded" before-slick="beforeSlick" after-slick="afterSlick" init-onload="true" infinite="true" data="entries" )
    div.listItem(ng-repeat="entry in entries")
        .row
            .col-sm-12
                img(ng-src="{{url}}")
        .row
            .col-sm-12
                span {{entry.text}}

 $scope.beforeSlick = function() {
     $(".listItem").hide();
 };
 $scope.afterSlick = function() {
     $(".listItem").show();
 };

/ Handles view before Slick Initializes
slick:not(.slick-initialized) {
  min-width: 2,048px;
  display: block;
  .video-wrap {
    float: left;
    margin-right: $line-height-computed/2;
  }
}

if (attrs.onInit) {
    scope.onInit();
  }
  if (typeof currentIndex !== "undefined" && currentIndex !== null) {
    return sl.slideHandler(currentIndex);
  }
});


slider.slick({
 ....
});


slider.on('reInit', function(sl) {
  if (attrs.onReInit) {
    return scope.onReInit();
  }
});

slider.on('setPosition', function(sl) {
  if (attrs.onSetPosition) {
    return scope.onSetPosition();
  }
});

slider.on('swipe', function(sl) {
  if (attrs.onSwipe) {
    return scope.onSwipe();
  }
});

slider.on('breakpoint', function(sl) {
  if (attrs.onBreakpoint) {
    return scope.onBreakpoint();
  }
});

slider.on('destroy', function(sl) {
  if (attrs.onDestroy) {
    return scope.onDestroy();
  }
});

slider.on('edge', function(sl) {
  if (attrs.onEdge) {
    return scope.onEdge();
  }
});