I have a register that lists people alphabetically from A to Z... Each person, Mr A for example, has a set of corresponding data `Histories`.

I have a table with a simple `ng-repeat` that displays the data for 12 cells (representing 12months).

If 12 months/cells worth of data is supplied, i show all the data, if only 5 months of data (anything less than 12) is provided, i call a service `srvEmptyCells` that calculates the remaining cells and displays in a darker colour.

The problem with this is, that i notice i am repeating the ng-repeat:

```
emptyCell in getEmptyCells

```

many many times which is impacting page performance given i have over 100 users.

Is there a way i save the number of empty cells for each particular user? And remove the need for the extra `ng-repeats`? Would a directive improve things?

Heres a plunker: <http://plnkr.co/edit/2UKDD1fvfYGMjX9oJqVu?p=preview>

**HTML:**

```
<table ng-repeat="data in myData" class="my-table">
  <caption>
    {{ data.Name }}
  </caption>
  <tbody>
    <tr>
      <th>Rate</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Rate}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Effort</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Effort}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Advance</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Advance}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Previous</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Previous}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Current</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Current}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Code</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Code}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
  </tbody>
</table>

```

**JS:**

```
app.controller('MainCtrl', function($scope, $http, factoryGetJSONFile, srvEmptyCells) {
  $scope.name = 'World';

  factoryGetJSONFile.getMyData(function(data) {
    $scope.myData = data.MyData.Entries;
  });

  $scope.getEmptyCells = srvEmptyCells.getEmptyCells;

});

app.factory('srvEmptyCells', function() {
    return {
        getEmptyCells: function(len) {
            var emptyCells = [];
            for(var i = 0; i < 12 - len; i++){
                emptyCells.push(i);
            }
            return emptyCells;
        }
     };
 });

```