metric.html

<div class="large-6 columns" ng-controller="metricCtrl">
  <select ng-model="selected['metric']" ng-options="m.name for m in metrics"></select>
  <table>
    <thead>
      <tr>
        <th>Dealership</th>
        <th ng-repeat="metric in metrics" class="{{ activeClass(metric, selected) }}">{{ metric.name }}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="dealership in dealerships(selected.conferenceGroup) | orderBy:metricValue:true">
        <td>{{ dealership.name }}</td>
        <td ng-repeat="metric in metrics">{{ findMetric(reports, metric.field, dealership.id) }}</td>
      </tr>
    </tbody>
  </table>
</div>

metric_ctrl.coffee

angular.module("leaderboard").controller "metricCtrl", ($scope, selected, dealershipsApi, weeklyDealershipReports) ->

  $scope.selected = selected

  weeklyDealershipReports.run(undefined, "2014-03-30").success (data) ->
    $scope.reports = data
    $scope.findMetric = findMetric
    $scope.metricValue = metricValue
    $scope.activeClass = activeClass

  dealershipsApi.then (result) ->
    $scope.dealerships = result.forConferenceGroup


  findMetric = (reports, field, dealershipId) ->
    reports.filter((report) ->
      report.dealership_id == dealershipId
    )[0]?[field]

  metricValue = (dealership) ->
    findMetric($scope.reports, $scope.selected.metric.field, dealership.id)

  activeClass = (metric, selected) ->
    if selected.metric.field == metric.field
      "active-leaderboard-metric"