Edit in JSFiddle

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 !r1.planYear && !r2.planYear ? 0 : (!r1.planYear ? 1 : -1);
    }
    return r1.planYear > r2.planYear ? 1 : -1;
  };
})
.controller('MyCtrl', function($scope, Data, Comparators) {
    $scope.visibleProjects = Data.get();
    $scope.comparator = Comparators.year;
    $scope.facilities = [];
    for(var i = 0; i < $scope.visibleProjects.length; i++) {
        $scope.facilities.push($scope.visibleProjects[i].facility);
    }
    
    $scope.$watch('selected', function(fac) {
       $scope.$broadcast("rowSelected", fac);
    });
})
;

<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">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>{{ 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>

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