Hi everybody,

I see the following markup when I examine the element

<th ng-repeat="col in wm.columns" ng-class="{selected: col.valueName === wm.selectedColumn}" class="ng-binding ng-scope selected" style="">
                    Extra Large    
                </th>

This element is supposed to show in blue color. It works correctly for me for the row attribute and for the selected value, but not for that header row.

Here is my directive HTML

<table id="matrixTable" class="table table-bordered table-hover table-list scTable">
        <thead>
            <tr>
                <th class="col-xs-4" align="center" valign="middle">
                    <select class="form-control"
                            ng-options="fld as fld for fld in wm.fieldValues" ng-model="wm.selectedField"
                            ng-change="wm.fieldChanged(wm.selectedField)"></select>
                </th>

                <th class="col-xs-8" align="center" valign="middle">
                    <label class="control-label">{{wm.columnAttribute}}</label>
                </th>
            </tr>
            <tr>
                <th class="col-xs-4" align="center" valign="middle">
                    <label class="control-label">{{wm.rowAttribute}}</label>
                </th>
                <th ng-repeat="col in wm.columns" ng-class="{selected: col.valueName === wm.selectedColumn}">
                    {{col.valueName}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in wm.rows ">
                <td class="col-xs-4" ng-class="{selected: row.valueName === wm.selectedRow}">
                    {{row.valueName}}
                </td>
                <td ng-repeat="column in wm.columns track by $index"
                    ng-click="wm.valueClick(row.valueName, column.valueName, $index);" 
                    ng-class="{selected: $index === wm.selectedIndex && row.valueName===wm.selectedRow}">
                    <span >{{$index}}</span>
                </td>
            </tr>
        </tbody>
    </table>

and this is what I have in site.css:

.table-list > tbody > tr.selected td {
    background: #eaf2f8;    
}
.table-list > tbody > tr > td.selected {
    background: #eaf2f8;
    color: blue;
}

.widget .table.table-bordered tr.selected td:first-child{
    border-left: solid 8px #2980b9 !important;
}

What am I missing? We're using bootstrap and the table's header looks a bit different.

I want 'Extra Large' to be in blue in the attached picture.