title: Retrieving json data with ngTable (Angular)
body: <p>I want to retrieve a json data in an HTML page with Angular, using ngTable.This is how I implemented the service and the controller:</p>
  
  <pre><code> angular.module('detail', ['ui.router', 'ngTable', 'ngResource'])
     .config(function ($stateProvider) {
        $stateProvider
        .state('stats.orderdetails', {
        url: '/orderdetails',
        templateUrl: 'order/details/details.html',
        controller: 'OrderDetailsCtrl as orderDetails'
     });
     })
        .service('orderDetailsService', function ($http, $log, configuration) {
  
    this.find = function (startDate, endDate) {
     return $http.get(configuration.apiEndpoint + '/orderdetails',  {params:      {startDate: startDate, endDate: endDate}})
          .success(function (res) {
           $log.debug('Getting order summary startDate=&lt;' + startDate + '&gt;         endDate=&lt;' + endDate + '&gt;');
        return res;
        console.log(res);
         })
      .error(function (res) {
        $log.error('Connection error while getting order details');
        if (res !== null &amp;&amp; res.message === 'Invalid date format') {
         throw {error: res.exception, message: 'Format de date invalide.',    showSummary: true};
         } else {
         throw {error: 'API_REST_NOT_AVAILABLE', message: 'Une erreur est    survenue.', showSummary: false};
       }
     });
   };
  
  })
   .controller('OrderDetailsCtrl', OrderDetailsCtrl);
   function OrderDetailsCtrl(orderDetailsService, $filter, NgTableParams,     $scope) {
   var orderDetails = this;
    var data = [];
  
     orderDetails.getSummary = function (startdate, endate) {
      orderDetailsService.find(startdate, endate)
      .then(function(res) {
       orderDetails.summary = res.data;
        data = orderDetails.summary;
  });
    };
  
  
     $scope.$on('filtering', function (event, filter) {
     orderDetails.getSummary(filter.startdate, filter.enddate);
     });
  
    orderDetails.statusList=[{id: '', title: 'Tout'}, {id: 'Expirée', title: 'Expirée'}, {id: 'Encaissée', title: 'Encaissée'}];
  
      orderDetails.tableParams = new NgTableParams({
      page: 1,  // show first page
      count: 5, // count per page
      filter: {orderStatus:''},
       sorting: {orderNumber: 'asc'} // initial sorting
     }, {
      total: data.length, // length of data
      counts:[5,10,15,20],// hide page counts control
       getData: function($defer, params) {
    // use build-in angular filter
        var filteredData = params.filter() ?
        $filter('filter')(data, params.filter()) :
        data;
        var orderedData = params.sorting() ?
         $filter('orderBy')(filteredData, params.orderBy()) :
         data;
          params.total(orderedData.length);
         $defer.resolve(orderedData.slice((params.page() - 1) *     params.count(), params.page() * params.count()));
  }
     });
  
      orderDetails.countPerPage = 1;
   }
  </code></pre>
  
  <p>the json data is as follows:</p>
  
  <pre><code>   [{"orderNumber":"040778","restaurantReference":"465","customerReference":"417644408646330","totalAmount"
       :490,"orderStatus":               {"frontLabel":"Encaissée","daoField":"CASHED_IN"},"orderDate":"07/03/2013 00:00:00"
       ,"withdrawalPoint":       {"frontLabel":"","daoField":"N/A"},"paymentType":       {"frontLabel":"PayPal","daoField"
      :"PAYPAL"},"offerType":{"frontLabel":"Pas     d'offre","daoField":"N/A"},"offerReference":""},{"orderNumber"
           :"979722","restaurantReference":"465","customerReference":"2214531549088301","totalAmount":120,"orderStatus": {"frontLabel":   "Expirée", "daoField":"EXPIRED"},"orderDate":"07/03/2013 00:00:00","withdrawalPoint":{"frontLabel" 
                                    :"","daoField":"N/A"},"paymentType":     {"frontLabel":"PayPal","daoField":"PAYPAL"},"offerType":{"frontLabel"
            :"Pas d'offre","daoField":"N/A"},"offerReference":""}]
  </code></pre>
  
  <p>the code in the HTML page is as follows:</p>
  
  <pre><code>     &lt;div class="row"&gt;
         &lt;h4 class="text-center"&gt;Rechercher des commandes (Du {{         filters.startdate | date:'dd-MM-yyyy'}} au {{filters.enddate |
            date:'dd-MM-yyyy' }})
         &lt;/h4&gt;
        &lt;/script&gt;
         &lt;table ng-table="orderDetails.tableParams" class="table table-hover" show-filter="true" &gt;
       &lt;tr ng-repeat="order in $data"&gt;
    &lt;td  data-title="'Numéro commande'" sortable= "'orderNumber'" &gt;
      {{order.orderNumber}}
    &lt;/td&gt;
    &lt;td data-title="'Ref restaurant'" sortable="'restaurantReference'"&gt;
      {{order.restaurantReference}}
    &lt;/td&gt;
    &lt;td data-title="'Ref client'" sortable="'customerReference'"&gt;
      {{order.customerReference}}
    &lt;/td&gt;
    &lt;td  data-title="'Montant total'" sortable="'totalAmount'"&gt;
      {{order.totalAmount | currency }}
    &lt;/td&gt;
    &lt;td data-title="'statut'" sortable="'orderStatus'" filter="{'orderStatus.frontLabel':'select'}" filter-data="orderDetails.statusList"&gt;
      {{order.orderStatus.frontLabel}}
    &lt;/td&gt;
    &lt;td data-title="'Date commande'" sortable="'orderDate'"&gt;
      {{order.orderDate}}
    &lt;/td&gt;
    &lt;td data-title="'Point de retrait'" sortable="'withdrawalPoint.frontLabel'"&gt;
      {{order.withdrawalPoint.frontLabel}}
    &lt;/td&gt;
    &lt;td data-title="'Type de paiement'" sortable="'paymentType.frontLabel'"&gt;
      {{order.paymentType.frontLabel}}
    &lt;/td&gt;
    &lt;td data-title="'Type d\'offre'" sortable="'offerType.frontLabel'"&gt;
      {{order.offerType.frontLabel}}
    &lt;/td&gt;
    &lt;td data-title="'Référence de l\'offre'" sortable="'offerReference'"&gt;
      {{order.offerReference}}
    &lt;/td&gt;
       &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I can't retrieve the values in HTML.What am I doing wrong? Thanks in adavance</p>