Bootstrap轮播不适用于多次ng-repeat

Question

对于下面显示的嵌套元素，所有DIV都会在页面中一次显示。此外，左右不起作用。

我测试了活动DIV的条件ng-if并且工作正常（意味着只有一个DIV处于活动状态）。

请查看以下代码

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div ng-repeat="(key1, table) in tables">
            <div ng-repeat="(key2, row) in table.rows">
                <div ng-repeat="(key3, cell) in row.cells">
                    <div ng-repeat="(key4, widget) in cell.widgets" >
                        <div class="item active" ng-if="key1===0 && key2===0 && key3===0 && key4===0" >
                            <img src="img_chania.jpg" alt="Chania" width="460" height="345">
                        </div>
                        <div class="item" ng-if="key1!=0 || key2!=0 || key3!=0 || key4!=0">
                            <img src="img_flower.jpg" alt="Flower" width="460" height="345">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>