

<div class="scrollable-window scrollable-window-lg">
  <div ng-repeat="room in rooms track by room.id" ng-show="room.devices.length">
    <div class="panel-group" data-animation="" start-collapsed="1" bs-collapse >
      <div>
        <div  bs-collapse-toggle>
          <i class="fa fa-plus"></i>
          <strong >&nbsp;&nbsp;{{room.name | uppercase}}</strong>
        </div>
        <div  bs-collapse-target>
          <table class="table">
            <thead>
              <tr>
                <th>Device</th>
                <th class="text-center">Volume Source</th>
                <th class="text-center">Reset</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="device in room.devices track by device.id">
                <td>{{device.name}}</td>
                <td class="text-center">
                  <select name="punch" ng-model="device.attr.punch">
                    <option value="-1">None</option>
                    <option ng-value="d.id" ng-repeat="d in $parent.room.devices track by d.id" ng-disabled="d.attr.punch === device.id">{{d.name}}</option>
                  </select> 
                </td>
                <td class="text-center"><button class="btn btn-danger" type="button" ng-click="device.attr.punch = -1">Reset</button></td>
              </tr>
              <tr>
                <td>Entertainment / Home Menu</td>
                <td class="text-center">
                  <select name="punch" ng-model="room.main.punch">
                    <option value="-1">None</option>
                    <option ng-value="d.id" ng-repeat="d in room.devices track by d.id">{{d.name}}</option>
                  </select>
                </td>
                <td class="text-center"><button class="btn btn-danger" type="button" ng-click="room.main.punch = -1">Reset</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
