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

    <!-- arrays are fully sortable and filterable -->

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

      <!-- delete a message using $remove -->

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