Angular-Slick and dynamic data not initializing correctly

I'm using the angular-slick directive because I have found this to work best for me in most instances. However, I'm still having a problem with getting the slides to initialize properly with dynamic data.

I have a dropdown that updates the relatedResorts json object in a factory. My controller watches for this update and updates scope.relatedResorts accordingly. That all works fine.

Before the slider updates, the slides/content+images are there and it looks like its working. The slick-initialized class has been applied and the excess slides are hidden. But they won't drag or auto advance and the arrows don't even show up.

I then make the images clickable so you can update the json object by clicking on one of the cards as well. The slider actually works better after an image is clicked and the object is refreshed, oddly enough, but the arrows still won't work. You can even drag the slider and see the other slides.

I have tried slick and unslick (which works only after the dom is loaded even with a $timeout applied and seems like a bit of a hack), creating my own directive, and $timeout. I've racked my brains trying to figure this one out.

help please...

HTML:

<slick class="row slider" arrows="true" responsive="breakpoints" slides-to-show=3 slides-to-scroll=1 dots="false" infinite="true" speed="300" touch-move="false" ng-if="relatedResorts.length" init-onload=true data="relatedResorts">
    <div class="card col-md-4 col-sm-6 col-xs-12" ng-repeat="option in relatedResorts" ng-click="resetResort(option.id)">
        <div class="img-container"> 
                <div class="banner">
                <p>{{option.resort_name}}</p>
            </div>
            <img ng-src="assets/images/resorts/{{option.id}}/{{option.resort_img}}" alt="Luxury Resort: {{option.resort_name}}"/>
        </div>
    </div>
</slick>

CONTROLLER:

resortModule.controller('relatedResortsController', ['$scope', 'locaService', '$timeout', function($scope, locaService, $timeout) {
    $scope.relatedResorts;
    $scope.resort;
    $scope.getRelated = function (resort) {
        //Resorts in location/destination on location change
        locaService.fetchRelatedResorts(resort).then(function(result) {
            $scope.relatedResorts= result;
        });
    }
    $scope.resetResort= function(resort){
        //reset resort for app when related resort image is clicked on. 
        $scope.resort= resort;
        locaService.updateResort(resort);
        /*$(".slider").slick('unslick');
        $(".slider").slick();*/
    }

    //watches factory for updates to objects
     $scope.$on('resortUpdated', function() {
        $scope.resort = locaService.resort;
        $scope.getRelated($scope.resort);
    });
}]);

via Chebli Mohamed