使用数据库中的数据动态创建angularjs中的选项卡和内容

Question

经过几个月的角度训练后，我逐渐意识到抓住它所需的额外努力。所以我决定冒险一点。以下代码有效，但数据显示在错误的位置

 <tabs>
<div ng-repeat="dept in dpt.depts">
    <pane title={{dept.DepartmentName}}>
          <div class="panel panel-default" >
                <div class="panel-heading" >
                    <h6>
                        Programmes
                    </h6>
                </div>
                <div class="panel-body" >
                    <ul class="list-group" >
                        <li class="list-group-item" ng-repeat="prog in dept.Programmes|filter: {DepartmentID:dept.DepartmentID}">
                            {{prog.ProgramName}} 
                        </li>
                    </ul>
                </div>
            </div>
   </pane>
</div>

部门名称显示为面板标题，但在各个部门中运行的程序显示在所有选项卡上。想法是将每个部门的程序限制在相关选项卡中。

提前致谢