Allowing table column to change color when clicking checkboxes - HTML/angularJS : I have a table and I am attempting to make it so that when one or more checkboxes in the table are clicked, the entire checkbox column changes color. 

For better understanding, I want it to look like this before being clicked (which I already have now):

[Before][1]

And this is what I want it to look after one or more boxes are clicked:

[After][2]


Here is the HTML I have for the grid:

    <table id="table-users" class="table table-condensed">
            <thead>
              <tr>
                <th>#</th>
                <th>
                    User ID
                    <a href="#" class="filter-link" ng-click="sortType = 'name'; sortReverse = !sortReverse" >
                    <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                    <span ng-show="sortType == 'name' && !sortReverse"></span>
                    <span ng-show="sortType == 'name' && sortReverse"></span></a>
                </th>
                <th>
                    Notification Email
                    <a href="#" class="filter-link" ng-click="sortType = 'email'; sortReverse = !sortReverse" >
                    <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                    <span ng-show="sortType == 'email' && !sortReverse"></span>
                    <span ng-show="sortType == 'email' && sortReverse"></span></a>
                </th>
                <th>
                    Role
                    <a href="#" class="filter-link" ng-click="sortType = 'type'; sortReverse = !sortReverse" >
                    <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                    <span ng-show="sortType == 'type' && !sortReverse"></span>
                    <span ng-show="sortType == 'type' && sortReverse"></span></a>
                </th>
                <th>
                    Last Activity  
                    <a href="#" class="filter-link" ng-click="sortType = 'lastActivity'; sortReverse = !sortReverse" >
                    <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                    <span ng-show="sortType == 'lastActivity' && !sortReverse"></span>
                    <span ng-show="sortType == 'lastActivity' && sortReverse"></span></a>             
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="user in users | orderBy:sortType:sortReverse | filter:searching">
                <td>{{ $index+1 }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.email }}</td>
                <td>
                  <!--<span class="circle-user" ng-class="{'circle-admin': user.type === 'Admin'}"><span class="glyphicon glyphicon-user"></span></span>-->
                  {{ user.type }}
                </td>
                <td>{{getLastDate(user.lastActivity) | date:'short'}}</td>
                <td><input type="checkbox"></td>
                <td>
                  <span ng-hide="user.name === authInfo.user">
                    <a href="#" ng-click="showUserAddDialog(user)">Edit</a>
                  </span>
                </td>
                <td>
                  <span ng-hide="user.name === authInfo.user">    
                    <a href="#" ng-click="showDeleteUser(user.id,user.name)">Delete</a>
                  </span>
                  </td>
                <td>
                  <span ng-hide="user.name === authInfo.user">
                    <a href="#" ng-click="showResetPassword(user.name)">Reset</a>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>

Not sure where to go from here to make this change.

  [1]: http://i.stack.imgur.com/ZYk60.png
  [2]: http://i.stack.imgur.com/AymdV.png