Угловая карусель не всегда обновляется при смене слайдов

Я новичок в AngularJS и буду благодарен за ваш совет. У меня есть ползунок с изображениями:

 <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>

В моем контроллере я назначаю $scope.slides некоторый массив изображений:

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

Кроме того, у меня есть функция, которая изменяет массив слайдов:

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

У меня есть два вопроса:

1) Он отлично работает, но иногда изображение, которое в настоящее время отображается на слайдере, не меняется, когда colorClicked функция colorClicked.

Интересно, нужно ли мне как-то обновить слайдер или область? Я попробовал $scope.$apply() в моей функции, но это не помогло.

2) Даже если я передаю массив в коллекцию слайдов, я все равно получаю ошибку в моей консоли: Error: the slides collection must be an Array хотя мой слайдер отлично работает.