<div class="container" ng-controller="productsCtrl">

<h4 class="blog-post-title">Products</h4>

<button type="button" class="btn btn-danger fa fa-plus" ng-click="open(product);">&nbsp;Add New Product</button>

<div class="table-responsive">

<div class="panel panel-primary">

<div class="panel-heading">List of products

<div class="sw-search" >

<div class="nav-search" id="nav-search">

Filter: <span class="input-icon">

<input placeholder="Filter products list ..." class="nav-search-input" ng-model="filterProduct" ng-change="resetLimit();" autocomplete="off" type="text" style="width:300px;" focus>

<i class="search-icon fa fa-search nav-search-icon"></i>

</span>

</div>

</div>

</div>

<div class="panel-body">

<table class="table table-striped">

<tr ng-show="products.length==0"><td style="vertical-align:middle;"><i class="fa fa-ban fa-3x"></i>&nbsp;No data found</td></tr>

<tr ng-hide="productready==1"><td style="vertical-align:middle;"><i class="fa fa-refresh fa-3x fa-spin"></i>&nbsp;Loading {{products.length}}</td></tr>

<p>products quantity:{{products.products.length}}<p/>

<tr><th ng-repeat="c in columns">{{c.text}}</th></tr>

<tr ng-repeat="c in products.products | filter:filterProduct | orderBy:'-id'" id="{{c.id}}" animate-on-change='c.packing + c.stock + c.price + c.description' ng-animate=" 'animate'">

<td>{{c.id}}</td><td>{{c.name}}</td><td>{{c.price}}</td><td>{{c.stock}}</td><td>{{c.packing}}</td><td>{{c.description}}</td>

<td>

<button class="btn" ng-class="{Active:'btn-success', Inactive:''}[c.status]" ng-click="changeProductStatus(c);">{{c.status}}</button>

</td>

<td style="width:100px">

<div class="btn-group">

<button type="button" class="btn btn-default fa fa-edit" ng-click="open(c);"></button>

<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="deleteProduct(c);"></button>

</div>

</td>

</tr>

</table>

</div>

</html>