angular-slick carousel not working when using promise

Question

This is driving my crazy, the first angular-slick is not working but the second is just fine, any idea what is going on?

I created a plunkr (in case someone is looking for an example in the future), but my problem is very odd because in my code/realproject is not working so I don't know what the hell is going on, anyway! here is the plunkr: http://plnkr.co/edit/URIbhoVpm1OcLSQqISPs?p=preview

I think the problem is related to the DOM because maybe angular needs to create the html before the carousel is render, I don't know... :(

This is the outcome: https://db.tt/noc0VgGU

Router:

(function() {
  'use strict';

  angular
    .module('mgxApp.landing')
    .config(configFunction);

  configFunction.$inject = ['$routeProvider'];

  function configFunction($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'app/landing/landing.html',
      controller: 'homeCtrl',
      controllerAs: 'hC'
    });
  }

})();

Controller:

(function() {
    'use strict';

    angular
        .module('mgxApp.landing')
        .controller('homeCtrl', homeCtrl);

    homeCtrl.$inject = ['modalFactory', 'channelFactory'];

    function homeCtrl(modalFactory, channelFactory) {
        var hC = this;
        hC.openAuthModal  = modalFactory.openAuthModal;
        hC.activeChannels;

        channelFactory.allActiveChannels().then(function(activechannels){
            console.log(activechannels);
            hC.activeChannels = activechannels;
        });

        hC.w = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

        hC.breakpoints = [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }, {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
       ];
    }
})();

HTML VIEW:

// NOT WORKING
      <slick class="slider single-item" responsive="hC.breakpoints" slides-to-show=3 slides-to-scroll=3>
        <div ng-repeat="channel in hC.activeChannels">
          {{channel.get("username")}}
        </div>
      </slick>
// Working fine
      <slick class="slider single-item" current-index="index" responsive="hC.breakpoints" slides-to-show=3 slides-to-scroll=3>
        <div ng-repeat="i in hC.w">
          <h3>{{ i }}</h3>
        </div>
      </slick>

Factory and Promise:

(function () {
    'use strict';

    angular
        .module('mgxApp.channel')
        .factory('channelFactory', channelFactory);

    channelFactory.$inject = ['$rootScope', '$q'];

    function channelFactory($rootScope, $q) {

        var service = {
            allActiveChannels       : allActiveChannels
        };

        return service;

        function allActiveChannels() {
            var deferral = $q.defer();
            var User = Parse.Object.extend("_User");
            var query = new Parse.Query(User).limit(10);
            query.find({
                success: function(users) {
                    console.log(users);
                    /*for (var i = 0; i < users.length; i++) {
                     console.log(users[i].get("username"));
                     }*/
                    deferral.resolve(users);
                },
                error: function(error) {
                    console.warn(error);
                    deferral.reject();
                }
            });
            return deferral.promise;
        }
    }
})();

Answer 1

I ended up using this solution: Angular-slick ng-repeat $http get

I'd suggest you to use ng-if on slick element. That will only load slick directive only when data is present just by checking length of data.

Markup

<slick ng-if="ctrl.products.length">
    <div ng-repeat="product in ctrl.products">
       <img ng-src="{{product.image}}" alt="{{product.title}}"/>
    </div>
</slick>

Answer 2

My working code

   <div  tmob-slick-slider sliderData=""  dynamicDataChange="true"   class="utilHeightImg marqueeContainer">    
       <slick id="productCarousel"  class="slider"   settings="vm.slickAccessoriesConfig"  data-slick='{"autoplay   ": true, "autoplaySpeed": 4000}'>
        <!-- repeat='image' -->

        <div ng-repeat="slideContent in vm.slides track by $index" >
          <div bind-unsafe-html="slideContent" ></div>
        </div>

        <!-- end repeat -->
      </slick>
    </div>

you have to write a directive to reinitialize the slider

angular.module('tmobileApp')
  .directive('tmobSlickSlider',['$compile',function ($compile) {
    return {
      restrict: 'EA',
      scope: true,
      link: function (scope, element, attrs) {



         scope.$on('MarqueesliderDataChangeEvent', function (event, data) {
          $compile(element.contents())(scope);
        });  


      }
    };
  }]);

Write this in your controller

hc.selectView=false; //   make this hc.selectView=true when your promise get resolve
    $scope.$watch('hc.selectView', function(newValue, oldValue) {
        $scope.$broadcast('MarqueesliderDataChangeEvent');
    });