AngularJS View

gistfile1.html

<div class="row">
  <div class="col-md-12">
    <h2>
      Proveedores
      <div class="pull-right">
        <input type="text" ng-model="search" class="form-control" placeholder="Filtrar proveedores...">
      </div>
    </h2>
    <div class="row">
      <div class="col-md-4">
        <h3 class="text-center">
          <div class="label label-success">{{(providers | filter:search).length}} <ng-pluralize count="(providers | filter:search).length" when="{'one':'proveedor','other':'proveedores'}"></ng-pluralize></div>
        </h3>
      </div>
      <div class="col-md-4">
        <h3 class="text-center">
          <div class="label label-success">{{totalProvidersAmount | currency}} gastado</div>
        </h3>
      </div>
      <div class="col-md-4">
        <h3 class="text-center">
          <div class=" label label-success">{{totalProvidersOrders}} <ng-pluralize count="totalProvidersOrders" when="{'one':'orden de compra','other':'ordenes de compra'}"></ng-pluralize></div>
        </h3>
      </div>
    </div>
    <table class="table table-striped" ng-show="(providers | filter:search).length > 0">
      <thead>
        <tr>
          <th width="50%"><a href="" ng-click="predicate = 'name'; reverse=false">Nombre</a>(<a href ng-click="predicate = '-name'; reverse=false">^</a>)</th>
          <th width="20%"><a href="" ng-click="predicate = 'cuit'; reverse=!reverse">CUIT</a></th>
          <th width="15%"><a href="" ng-click="predicate = 'purchase_orders_count'; reverse=!reverse">Ordenes de compra</a></th>
          <th width="15%"><a href="" ng-click="predicate = 'total_amount'; reverse=!reverse">Total Pesos</a></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="provider in providers | filter:search | orderBy:predicate:reverse">
          <td width="50%"><a ng-href="#/details/{{provider.cached_slug}}">{{provider.name}}</a></td>
          <td width="20%"><a ng-href="#/details/{{provider.cached_slug}}">{{provider.cuit}}</a></td>
          <td width="15%"><div class="pull-right">{{provider.purchase_orders_count}}</div></td>
          <td width="15%"><div class="pull-right">{{provider.total_amount | currency}}</div></td>
        </tr>
      </tbody>
    </table>
    <div ng-hide="(providers | filter:search).length > 0">
      No hay proveedores para la busqueda realizada.
    </div>

  </div>
</div>