Scrollable table

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://rawgithub.com/alalonde/angular-scrollable-table/master/angular-scrollable-table.js"></script>
Facitlity column should be center aligned.

<div ng-controller="MyCtrl" style="margin-top: 20px">
  <scrollable-table watch="visibleProjects">
      <table class="table table-striped table-bordered">
          <thead>
              <tr>
                   <th sortable-header col="facility" class="text-center">Facility</th>
                   <th sortable-header col="code">Unit code</th>
                   <th sortable-header col="cost">Cost</th>
                   <th sortable-header col="conditionRating">Condition score</th>
                   <th sortable-header col="extent">Replace %</th>
                   <th sortable-header col="planYear" comparator-fn="comparator">Plan year</th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="response in visibleProjects" row-id="{{ response.facility }}" ng-class="{info: selected == response.facility}" >
                  <td class="text-center">{{ response.facility }}</td>
                  <td>{{ response.code }}</td>
                  <td>{{ response.cost }}</td>
                  <td class="cr">
                      {{ response.conditionRating }}
                  </td>
                  <td>{{ response.extent }}</td>
                  <td>{{ response.planYear }}</td>          
              </tr>
          </tbody>
      </table>
    </scrollable-table>
    <div>
        <label>Select a facility:</label>
        <select ng-model="selected" ng-options="f for f in facilities"></select>
    </div>
</div>

CSS

.scrollableContainer {
    height: 300px;
    position: relative;
    padding-top: 37px;
    margin-bottom: 30px;
}
.scrollableContainer .headerSpacer {
    border: 1px solid #d5d5d5;
    border-bottom-color: #bbb;
    position: absolute;
    height: 36px;
    top: 0;
    right: 0;
    left: 0;
}
.scrollableContainer th .th-inner .title > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scrollableContainer th .orderWrapper {
    position: absolute;
    top: 0;
    right: 2px;
    cursor: pointer;
}
.scrollArea {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #d5d5d5;
}
.scrollArea table {
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 0;
    border: none;
    border-collapse: separate;
}
.scrollArea table th {
    padding: 0;
    border: none;
}
.scrollArea table .th-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    top: 0;
    height: 36px;
    line-height: 36px;
    padding: 0 8px;
    border-left: 1px solid #ddd;
}
.scrollArea table tr th:first-child .th-inner {
    border-left: none;
}
.scrollArea table .th-inner.condensed {
    padding: 0 3px;
}
.scrollArea table tbody tr td:first-child {
    border-left: none;
}
.scrollArea table tbody tr td:last-child {
    border-right: none;
}
.scrollArea table tbody tr:first-child td {
    border-top: none;
}
.scrollArea table tbody tr:last-child td {
    border-bottom: 1px solid #ddd;
}

table .cr {
    min-width: 30px;    
}

.table .text-center {
    text-align: center;
}

JavaScript

var myApp = angular.module('myApp',['scrollable-table'])
.service('Data', function() {
    this.get = function() {
        return [{
          facility: "Atlanta",
          code: "C-RD34",
          cost: 540000,
          conditionRating: 52,
          extent: 100,
          planYear: 2014
        }, {
          facility: "Seattle",
          code: "CRDm-4",
          cost: 23000,
          conditionRating: 40,
          extent: 88,
          planYear: 2014
        }, {
          facility: "Austin",
          code: "GR-5",
          cost: 1200000,
          conditionRating: 92,
          extent: 90,
          planYear: 2014
        }, {
          facility: "Dayton",
          code: "LY-7",
          cost: 123000,
          conditionRating: 71,
          extent: 98,
          planYear: 2014
        }, {
          facility: "Portland",
          code: "Dm-4",
          cost: 149000,
          conditionRating: 89,
          extent: 77,
          planYear: 2014
        }, {
          facility: "Dallas",
          code: "AW-3",
          cost: 14000,
          conditionRating: 89,
          extent: 79,
          planYear: 2014
        }, {
          facility: "Houston",
          code: "Dm-4",
          cost: 1100000,
          conditionRating: 93,
          extent: 79,
          planYear: 2014
        }, {
          facility: "Boston",
          code: "DD3",
          cost: 1940000,
          conditionRating: 86,
          extent: 80,
          planYear: 2015
        }, {
          facility: "New York",
          code: "ER1",
          cost: 910000,
          conditionRating: 87,
          extent: 82,
          planYear: 2015
        }];
    };
})
// when sorting by year, sort by year and then replace %
.service("Comparators", function() { 
  this.year = function(r1, r2) {
    if(r1.planYear === r2.planYear) {
      if (r1.extent === r2.extent) return 0;
      return r1.extent > r2.extent ? 1 : -1;
    } else if(!r1.planYear || !r2.planYear) {
      return...