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

 <div class="container" ng-controller="BooksList">
  <h1>Books list</h1>
<input type="text" name="book" ng-model='searchString' placeholder="Search...">
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Index</th>
      <th scope="col" ng-click="sortBy('title')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'title', 'glyphicon-chevron-down' : sortField === '-title'}"></i> Title</th>
      <th scope="col" ng-click="sortBy('author')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'author', 'glyphicon-chevron-down' : sortField === '-author'}"></i>Author</th>
      <th scope="col" ng-click="sortBy('date')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'date', 'glyphicon-chevron-down' : sortField === '-date'}"></i>Date</th>
      <th scope="col" ng-click="sortBy('cost')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'cost', 'glyphicon-chevron-down' : sortField === '-cost'}"></i>Cost</th>
      <th scope="col" ng-click="sortBy('rate')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'rate', 'glyphicon-chevron-down' : sortField === '-rate'}"></i>Rate</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
   <tr ng-repeat="book in books | filter: searchString | orderBy: sortField track by $index">
<td>{{$index}}</td>
<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><button class="btn btn-danger btn-xs" ng-click="deleteBook(book.id)">x</button></td>
    </tr>
  </tbody>
</table>
  </div>