Angular-carousel is not always updated on slides change

Question

I'm new to AngularJS and would appreciate your advice. I have the slider with images:

 <ul rn-carousel rn-carousel-index="carouselIndex"  rn-carousel-buffered>
            <li ng-repeat="slide in slides track by slide.id" ng-class="'id-' + slide.id">
                <div ng-style="{'background-image': 'url(' + slide.image + ')'}"  class="bgimage">
                </div>
            </li>
        </ul>

In my controller I assign to $scope.slides some array of images:

$scope.slides = [];
$.each(defaultImages,function(i, element)
       {
          var slide = {
            image://...
          };
          $scope.slides.push(slide);
       });

Also, I have a function that changes slides array:

$scope.colorClicked = function ($index, color_id) {
    //...
    $scope.slides = [];
    $.each(images,function(i, element)  
       {
          var slide = {
           image:/...
          };
          $scope.slides.push(slide);
       });
  }

I have the two issues:

1)It works fine, but sometimes the image that is currently shown on the slider is not changing when my colorClicked function fires.

I wonder should I somehow update the slider or the scope? I tried $scope.$apply() in my function, but it did not help.

2) Even if I pass array to the slides collection, I anyway get error in my console: Error: the slides collection must be an Array although my slider works fine.

Answer 1

Soluction error 'Error: the slides collection must be an Array at Error (native) angular-carousel.min.js:8'

//Controller
$scope.banners = [];

Banners.getListBanners().then(function (banners) {
    $scope.banners = banners;
});

//view

<ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slide" ng-show="banners.length > 0">
            <li ng-repeat="banner in banners">
                <p ng-bind-html="banner.title | to_trusted"></p>

                <img ng-if="isBlank(banner.link)" ng-src="{{banner.img}}" alt="{{banner.title | to_trusted}}">

                <a ng-if="!isBlank(banner.link)" ng-click="openInExternalBrowser(banner.link, banner.type)" href="#">
                    <img ng-src="{{banner.img}}" alt="{{banner.title | to_trusted}}">
                </a>

            </li>
        </ul>