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

<div ng-controller='BooksList' class="container">
		<div class="page-header">
			<h1>Books</h1>
		</div>
		<div class="page-boody">
			<input type="text" ng-model='searchString' placeholder="Filter" class="form-control">
			<table class="table table-hover container">
				<thead>
					<td ng-click='sortBy("title")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "title", "glyphicon glyphicon-chevron-down": sortFild === "-title"}'></i>Title</td>
					<td ng-click='sortBy("author")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "author", "glyphicon glyphicon-chevron-down": sortFild === "-author"}'></i>Author</td>
					<td ng-click='sortBy("date")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "date", "glyphicon glyphicon-chevron-down": sortFild === "-date"}'></i>Date</td>
					<td ng-click='sortBy("cost")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "cost", "glyphicon glyphicon-chevron-down": sortFild === "-cost"}'></i>Price</td>
					<td ng-click='sortBy("rate")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "rate", "glyphicon glyphicon-chevron-down": sortFild === "-rate"}'></i>Rate</td>
					<td></td>
				</thead>
				<tbody>
					<tr ng-repeat='item in books | orderBy:sortFild  | filter: searchString'>
						<td>{{item.title}}</td>
						<td>{{item.author | uppercase}}</td>
						<td>{{item.date | date: 'longDate'}}</td>
						<td>{{item.cost}}</td>
						<td>{{item.rate | number : 1}}</td>
						<td>
							<button class="btn btn-danger" ng-click='deleteBook(item.id)'></button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>