AngularFire Data Table

<div ng-app="sampleApp" ng-controller="MealCtrl">
  <p>
    Search: <input ng-model="searchText"> Sort by:
    <select ng-model="orderBy">
      <option>from</option>
      <option>content</option>
      <option>timestamp</option>
    </select>
  </p>

<ul class="chatbox">
    
    <li ng-repeat="message in messages | orderBy:orderBy | filter:searchText">
      From : {{ message.from }} <br> Content : {{ message.content }} <br> Meal : {{message.number}} <br> Carbs : {{message.carbs}} <br> Sugar : {{message.sugar}} <br> Protein : {{message.protein}} <br> Fat : {{message.fats}} <br>
      
      <a href="" ng-click="messages.$remove(message)">Delete Me</a>
      <a href="" ng-click="messages.$edit(message)">Edit Me</a>
    </li>
  </ul>

<form ng-submit="addMessage()">
    <input type="text" ng-model="message" placeholder="message" title="addToDB">
    <input type="text" ng-model="number" placeholder="number" title="addToDB">
    <input type="text" ng-model="carbs" placeholder="carbs" title="addToDB">
    <input type="text" ng-model="sugar" placeholder="sugar" title="addToDB">
    <input type="text" ng-model="protein" placeholder="protein" title="addToDB">
    <input type="text" ng-model="fat" placeholder="fat" title="addToDB">
    <input type="submit">
  </form>
  <br>
  <table class="table-fill">
    <thead>
      <tr>
        <th class="text-left">Meal</th>
        <th class="text-left">Carbs</th>
        <th class="text-left">Sugar</th>
        <th class="text-left">Fats</th>
        <th class="text-left">Protein</th>
      </tr>
    </thead>
    <tbody class="table-hover">
      <tr ng-repeat="message in messages">
        <td class="text-left">
          {{ message.number }}
        </td>
        <td class="text-left">
          {{ message.carbs }}
        </td>
        <td class="text-left">
          {{ message.sugar }}
        </td>
        <td class="text-left">
          {{ message.protein }}
        </td>
        <td class="text-left">
          {{ message.fats }}
        </td>

</tr>
    </tbody>
    <tfoot>
      <tr>
        <td class="text-left">
          Total
        </td>
        <td class="text-left">
          {{ carbValues }}
        </td>
        <td class="text-left">
        </td>
        <td class="text-left">
        </td>
        <td class="text-left">
        </td>
      </tr>
    </tfoot>
  </table>

</div>