在可折叠体内部使用ng-repeat而不是将数据包裹在容器

Question

我正在使用Angular-materialize来加载和填充我的实体化可折叠，一切都很好，这是我的代码：

<div class="row">
    <ul class="collapsible popout" data-collapsible="accordion" ng-cloak>
        <li ng-repeat="issuedTicket in issuedTickets">
            <div class="collapsible-header" ng-cloak>
                <div class="col m2">
                    <p>{$ issuedTicket.full_name $}</p>
                </div>
                <div class="col m2">
                    <p>{$ issuedTicket.email $}</p>
                </div>
                <div class="col m1">
                    <p>{$ issuedTicket.total_amount $}</p>
                </div>
                <div class="col m3">
                    <p>{$ issuedTicket.purchace_time $}</p>
                </div>
             </div>
            <div class="collapsible-body" ng-cloak>
                <div class="col s12">
                    <div class="row">
                        <div class="col m4">Ticket Type</div>
                        <div class="col m4">Ticket Price</div>
                        <div class="col m4">Discount</div>
                    </div>
                </div>
                <div class="col s12" ng-repeat="ticket in issuedTicket.tickets">
                    <div class="row">
                        <div class="col m4">{$ ticket.type $}</div>
                        <div class="col m4">{$ ticket.price $}</div>
                        <div class="col m4">{$ ticket.discounted $}</div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

问题是我在“可折叠体”内部有另一个ng-repeat，当我点击展开以查看数据时，数据就在那里但是“可折叠体”的高度为0且数据不在“可折叠体”内。

可折叠内部加载的数据显示正常

但是当我点击展开时会发生这种情况：

任何人都可以向我解释为什么会发生这种情况以及是否有解决此问题的方法？

谢谢