Slider not working with ng-repeat

[MarcNealer]

working from the examples and using Angular 1 I added the slider code as described and changed to use ng-repeat

<div class="slider" slider>
    <ul class="slides">
         <li ng-repeat="images in vm.gallery1">
            <img ng-src="{{images.image}}">
        </li>
    </ul>
</div>

I checked and the right urls are being put in and the html looks fine, but I only get a grey box with no selection circles under it as well, thus not bad images.

I manually built the html using the same urls from the list and then it worked fine. Data from Gallery1 is also fine with *.image being the image url

There are also no messages or errors showing in the developers console

[MarcNealer]

I've narrows this down further. The issue is not the ng-repeat, but the the fact that I'm doing an API call to get the data. The slider module seems to load straight away and does not check for any data refreshes and appears to ignore updates to the data binds

[MarcNealer]

Right, I found the for this.

I would be nice if it was in the docs.

Basically you need to wrap the slider Div in an ng-if testing for when data is loaded. You cannot add the html before the API call is complete as the slider does not recognise updates to the binding.

Thus the following works

<div ng-if="vm.gallery1.length > 0">
    <h3 class="center" translate>title.gallery1</h3>
    <div class="slider" slider>
        <ul class="slides">
            <li ng-repeat="img in vm.gallery1">
                <img ng-src="{{img.image}}">
            </li>
        </ul>
    </div>
</div>