无法使用angularJs数据绑定绑定复杂的UI

Question

我有一个angularJs指令，它将一个集合绑定到如下所示的UI：

目前绑定都很好，唯一的问题是设置突出显示的样式。用边界突出显示的tiels被分组。

以下是我的数据结构：

[ {bandwidth: 0
 cardInterface: 0
 groupEnd: false
 groupStart: false
 grouped: false
 id: -1
 signalingTimeSlot: 1
 splitTimeSlot: false},
 {
 bandwidth: 0
 cardInterface: 0
 groupEnd: false
 groupStart: false
 grouped: false
 id: -1
 ignalingTimeSlot: 2
 splitTimeSlot: false
},
{
 bandwidth: 0
 cardInterface: 0
 groupEnd: false
 groupStart: false
 grouped: false
 id: -1
 signalingTimeSlot: 4
 splitTimeSlot: false
 }, {
 bandwidth: 192
 cardInterface: 0
 groupEnd: false
 groupStart: true
 grouped: true
 id: 0
  signalingTimeSlot: 16
  splitTimeSlot: false
  timeSlotGroup: [ here there are 3 of the same object type which needs to be grouped]
 }]

以下是指令模板：

<div class="timeSlotWrapper">
<div ng-repeat-start="t in timeSlots | filter: {cardInterface : cardSlotId * 2}"  time-slot-obj="t" class="timeSlotItem"
     ng-click="timeSlotClick(cardId, $index, 0)" >{{ t.signalingTimeSlot }}</div>
   <!--<div ng-repeat-start="t in timeSlots | filter: {cardInterface : cardSlotId * 2}"  time-slot-obj="t" class="timeSlotItem"-->
        <!--ng-click="timeSlotClick(cardId, $index, 0)" ng-if="!t.grouped">{{ t.signalingTimeSlot }}</div>-->
   <!--<div class="configured" ng-if="t.timeSlotGroup.length > 0">-->
       <!--<div time-slot-obj="t1" ng-repeat="t1 in t.timeSlotGroup"  ng-click="timeSlotClick(cardId, $index, 0)" class="timeSlotItem">{{ t1.signalingTimeSlot }}</div>-->
   <!--</div>-->
   <br ng-repeat-end ng-if="(timeSlotCount == 31 && t.signalingTimeSlot === 15) || (timeSlotCount == 24 && t.signalingTimeSlot === 12)"/>

注意注释行，我尝试打破集合并使用单独的样式显示分组的图块。但这会使每个组出现在不同的行而不是同一行。