Slick slider overlapping images with angular strap

Question

I have a problem implementing angular strap and slick carousel. I have angular strap for handling tabs and slick carousel for each content of different tabs. The problem is that when I change the tab, it shows me the images of the slick carousel one over the other. I cant figure out what the problem is, could anyone help me? The problem in photo:

My tabs controller:

app.controller('TabsVinoteca', function($scope, $templateCache) {   

 $scope.tabs = [
    {title:'VINOS', 
    page: 'views/vinoteca/vinos.html'},
    {title:'ESPUMANTES',
    page: 'views/vinoteca/espumantes.html'}
    ];
});

My slick carousel controller code:

app.controller('SlickWinery', function ($scope, $timeout) {
  $scope.slickConfig3Loaded = true;
  $scope.slickCurrentIndex = 1;
  $scope.slickConfig = {
  autoplay: false,
  dots: false,
  nextArrow: '<span class="right slick-next"><i class="glyphicon glyphicon-chevron-right"></i></span>',
  prevArrow: '<span class="left slick-prev"><i class="glyphicon glyphicon-chevron-left"></i></span>',
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
  {
    breakpoint: 768,
    settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 3
    }
   },
  {
    breakpoint: 480,
    settings: {
       arrows: false,
       centerMode: true,
       centerPadding: '40px',
       slidesToShow: 1
    }
  }
   ],
          method: {},
          event: {}
 };


 });

My html code:

<div class="container-fluid" id="sliderBrands" ng-controller="SlickWinery">

<h4>VINOS</h4>

 <div class="col-lg-12 hoverGray">
  <slick class="slider" settings="slickConfig" ng-if="slickConfig3Loaded" dots="true">
    <div>   
      <a href="#" tabindex="1"><img ng-src="img/home/bodegas/1.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="2"><img ng-src="img/home/bodegas/2.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="3"><img ng-src="img/home/bodegas/3.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="4"><img ng-src="img/home/bodegas/4.png"/></a>
    </div>
    <div>   
      <a href="#" tabindex="5"><img ng-src="img/home/bodegas/5.png"/></a>
    </div>
   </slick>
  </div>
</div>

Answer 1

$timeout(function () {
    slickConfig1Loaded = true;
});

The ng-if is there to prevent Slick from initializing too soon. Try putting the true assignment in a timeout so it gets put on the bottom of the callstack, after the tabbed content has had a chance to give its containers dimensions. Slick needs them dimensions.

////

Also, in your JS you say slickConfig3Loaded but in the HTML you say slickConfig1Loaded, is that a typo in the code or your Stack question?