AngularJS + UI Bootstrap：动态手风琴

Question

我在AngularJS中制作动态手风琴时遇到了一些问题，因为我的内容出现在错误的位置。我希望每个组的手风琴都能像这样显示和隐藏其用户：

---

组名1

第1组的第一个用户
组1的第二个用户
..

组名2

第2组的第一个用户
组2的第二个用户
..

---

我的代码如下：

<div class="list">
  <uib-accordion close-others="oneAtATime">
    <div uib-accordion-group is-open="status.isFirstOpen">

      <uib-accordion-heading>
        <div class="item item-divider" ng-repeat-start="group in addPerson_list | orderBy: 'name'" >
          {{ group.name }}
          <span>
            <i class="pull-right fa" ng-click="status.isFirstOpen = !status.isFirstOpen" ng-class="{'fa-arrow-up': status.isFirstOpen, 'fa-arrow-down': !status.isFirstOpen}"></i>
           </span>
        </div>
      </uib-accordion-heading>

      <a ng-repeat-end ng-repeat="person in group.users | orderBy: 'name'" ng-click="togglePerson(person)" class="item item-avatar item-icon-right">
        <h2>{{ person.name }}</h2>
        <i ng-if="person.invited" class="icon ion-ios-checkmark"></i>
        <i ng-if="!person.invited" class="icon ion-ios-circle-outline"></i>
      </a>

     </div>
  </uib-accordion>
</div>

在没有整个手风琴指令的情况下，代码以我想要的正确形式显示列表，但是如果我应用指令，它将什么也没有显示或混乱的列表。