app.factory('mails', ['$http', function ($http) {
  var path = 'mails.json';
  var mails = $http.get(path).then(function (resp) {
    return resp.data.mails;
  });

  var factory = {};
  factory.all = function () {
    return mails;
  };
  factory.get = function (id) {
    return mails.then(function(mails){
      for (var i = 0; i < mails.length; i++) {
        if (mails[i].id == id) return mails[i];
      }
      return null;
    });
  };
  return factory;
}]);

app.controller('MailListCtrl', ['$scope', 'mails', '$stateParams', function($scope, mails, $stateParams) {
  $scope.fold = $stateParams.fold;
  mails.all().then(function(mails){
    $scope.mails = mails;
  });
}]);

<table>
          <tbody>
          <tr >
            <td ng-repeat="mail in mails" class="col-cb">
                <div class="checkbox checkbox-replace">
                  <input type="checkbox" class="cbr" />
                </div>
              </td>
              <td class="col-name">
                <a href="" class="star starred">
                  <i class="fa-star"></i>
                </a>
                <a class="text-md">{{mail.subject}}</a>
                        <span class="label bg-light m-l-sm">{{mail.label}}</span>
              </td>
              <td class="col-subject">
                {{mail.content | limitTo:20}}
              </td>
              <td class="col-options hidden-sm hidden-xs">
                <a href="#/app/mailbox-message"><i class="linecons-attach"></i></a>
              </td>
              <td class="col-time">{{ mail.date | fromNow }}</td>
            </tr>
        </tbody></table>

{
  "mails": [
    {
      "id": 9,
      "subject": "Bootstrap components written in pure AngularJS",
      "from": "james@gmail.com",
      "avatar": "img/a9.jpg",
      "to": [
        {
          "name": "Mogen",
          "email": "mogen.abc@hotmail.com"
        }
      ],
      "content": "Retur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper Neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat.",
      "date": "12:20 7/23/2014",
      "label": "bootstrap",
      "fold": "important"
    },
    {
      "id": 7,
      "subject": "Lazy loading Angular controllers, directives and services",
      "from": "lucy@hotmail.com",
      "avatar": "img/a2.jpg",
      "to": [
        {
          "name": "Mogen",
          "email": "mogen.abc@hotmail.com"
        }
      ],
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat. Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.",
      "date": "10:20 7/22/2014",
      "label": "angular",
      "fold": "sent",
      "state": "unread"
    }
  ]
}

<table>
          <tbody>
          <tr ng-repeat="mail in mails">
            <td class="col-cb">
                <div class="checkbox checkbox-replace">
                  <input type="checkbox" class="cbr" />
                </div>
              </td>
              <td class="col-name">
                <a href="" class="star starred">
                  <i class="fa-star"></i>
                </a>
                <a class="text-md">{{mail.subject}}</a>
                        <span class="label bg-light m-l-sm">{{mail.label}}</span>
              </td>
              <td class="col-subject">
                {{mail.content | limitTo:20}}
              </td>
              <td class="col-options hidden-sm hidden-xs">
                <a href="#/app/mailbox-message"><i class="linecons-attach"></i></a>
              </td>
              <td class="col-time">{{ mail.date | fromNow }}</td>
            </tr>
        </tbody></table>