Bootstrap Карусель не работает NgRepeat AngularJS

Question

Я использую ng-repeat для загрузки начальных изображений, как показано ниже, в карусель. Я использую $ index, чтобы проверить, равен ли индекс 0, установлен как «carousel-item active», иначе, если не 0, установите его как обычный «carousel-item». Когда я проверяю код на Chrome, появляются и «carousel-item active», и «carousel-item», но карусель не работает.

Вот фрагмент HTML Я работаю над:

<div data-ng-init="images=['pics/nature1.png','pics/nature2.png']">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div data-ng-repeat="image in images">
                <div data-ng-if="$index===0">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="{{image}}" alt="First slide">
                    </div>
                </div>
                <div data-ng-if="$index!=0">
                    <div class="carousel-item">
                        <img class="d-block w-100" src="{{image}}" alt="First slide">
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Любой совет будет высоко ценится, спасибо за чтение.