AgularJSBooks/app/views/books-list.template.html

<div class="page-header">
  <h1>Books list</h1>
</div>
<button class="btn btn-primary pull-right" style="margin-bottom: 20px" ng-click="addBook()"><i class="glyphicon glyphicon-plus"></i>Add Book</button>
<input type="text" placeholder="Filter" class="form-control" ng-model="searchString" /><br />
<table class="table table-hover">
  <thead>
    <tr>
      <th ng-click="sortBy('title')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'title', 'glyphicon-chevron-down' : sortField === '-title'}"></i> Title</th>
      <th ng-click="sortBy('author')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'author', 'glyphicon-chevron-down' : sortField === '-author'}"></i>Author</th>
      <th ng-click="sortBy('date')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'date', 'glyphicon-chevron-down' : sortField === '-date'}"></i>Date</th>
      <th ng-click="sortBy('cost')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'cost', 'glyphicon-chevron-down' : sortField === '-cost'}"></i>Cost</th>
      <th ng-click="sortBy('rate')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'rate', 'glyphicon-chevron-down' : sortField === '-rate'}"></i>Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="book in books | orderBy:sortField | filter: searchString track by $index">
      <td>{{book.title}}</td>
      <td>{{book.author | uppercase}}</td>
      <td>{{book.date | date: 'longDate'}}</td>
      <td>{{book.cost | currency}}</td>
      <td>{{book.rate | number : 1 }}</td>
      <td>
        <a href="#/books/{{book.id}}" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-eye-open"></i></a>
        <button class="btn-danger btn-xs" ng-click="deleteBook(book)"><i class="glyphicon glyphicon-trash"></i></button>
      </td>
    </tr>
  </tbody>
</table>
<div class="text-center" ng-if="!books.length">
  No Data
</div>