title: angular search counter and pagination
body: <p>Have started coding with Angular.js in mvc and I have two problems</p>
  
  <p>-The first is a issue where the search is counting the number of entry's in the info json data but not the number that is shown after the table is filtered threw a search i.e what is shown after wards if there  was a result of one result being currently shown  the label should count one.</p>
  
  <p>-Also if any one knows how to do  pagination, Any help would be greatly appreciated thanks.</p>
  
  <pre><code>   &lt;script&gt;
              var MyApp = angular.module('MyApp', []);
              MyApp.controller('MyAppCtrl', function ($scope) {
                  $scope.Info = [
                    { "date":"23/09/2014","name": "john", "detail": "sssss" },
                    { "date": "27/09/2014", "name": "mary", "detail": "gggggg"  }
  
  
                  ];
  
  
          &lt;/script&gt;
          &lt;div class="container" ng-app="MyApp"&gt;
              &lt;div class="row" style="padding-top: 60px"&gt;
                  &lt;div class="panel panel-warning"&gt;
                      &lt;div class="panel-heading"&gt;Home
  
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
  
                          @*  left *@
                          &lt;div class="col-md-4"&gt;
                              &lt;div class=""&gt;
  
                                  &lt;div class="butLay"&gt;
                                      @Html.ActionLink("Reminders", "Reminders", null, new { @class = "btn btn-warning btn-md" })
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="butLay"&gt;
  
  
  
                                  @Html.ActionLink("Expected customer", "Expectedcustomer", null, new { @class = "btn btn-info btn-md" })
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
  
                          @*  Right side*@
                          &lt;div class="pr col-md-6" ng-controller="MyAppCtrl"&gt;
                              Search:&lt;input ng-model="query" type="text" /&gt;
                              &lt;span class="label label-info"&gt;{{Info.length}} &lt;/span&gt;
                              &lt;table class="table table-striped table-hover "&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;
                                          &lt;th&gt;&lt;a href="" ng-click="sortField = 'date'; reverse = !reverse"&gt;Date&lt;/a&gt;&lt;/th&gt;
                                          &lt;th&gt;&lt;a href="" ng-click="sortField = 'name'; reverse = !reverse"&gt;Name&lt;/a&gt;&lt;/th&gt;
                                          &lt;th&gt;&lt;a href="" ng-click="sortField = 'detail'; reverse = !reverse"&gt;detail&lt;/a&gt;&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
  
  
                                      &lt;tr ng-repeat="custom in Info| filter:query | orderBy:sortField:reverse"&gt;
                                          &lt;td&gt;{{custom.date}}&lt;/td&gt;
                                          &lt;td&gt;{{custom.name}}&lt;/td&gt;
                                          &lt;td&gt;{{custom.detail}}&lt;/td&gt;              
                                      &lt;/tr&gt;                   
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                              @*&lt;ul class="pagination pagination-sm"&gt;
                                  &lt;li class="disabled"&gt;&lt;a href="#"&gt;«&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;»&lt;/a&gt;&lt;/li&gt;
                              @*&lt;/ul&gt;*@
  
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                      &lt;table class="table table-condensed table-hover table-striped"&gt;&lt;/table&gt;
                  &lt;/div&gt;
                  @* of panel *@
              &lt;/div&gt;
              @*of row*@
          &lt;/div&gt;
          @* of container *@
  </code></pre>