Ng-Repeat and ng-table issue

Question

I'm new to Angular JS. The below Code is not working. I have tried with data table with Ng-Repeat. But It just showing the table without any sorting, pagination option.

Response Data looks like:

[{
    \"ACCOUNT_LOCAL\":\"9007\",\"COMPANY_ID\":\"10001\",
    \"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"9008\",
    \"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\",
    \"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\",
    \"ACTIVE\":true
},        
{
    \"ACCOUNT_LOCAL\":\"9008\",\"COMPANY_ID\":\"10001\",
    \"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"9009\",
    \"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\",
    \"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\",
    \"ACTIVE\":true
},{
    \"ACCOUNT_LOCAL\":\"9014\",\"COMPANY_ID\":\"10001\",
    \"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"TEST\",
    \"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\",
    \"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\",
    \"ACTIVE\":true
},

HTML file

<div ng-app="myApp" ng-controller="AccountMappingCtrl as vm">
  <table ng-table="vm.tableParams" show-filter="true" class="table">
    <tr ng-repeat="accountMap in $data">
      <td title="'IC_PARTNER'" filter="{ IC_PARTNER: 'text'}" sortable="'IC_PARTNER'">
        {{ accountMap.IC_PARTNER }}
      </td>
      <td title="'ACCOUNT_GLOBAL'" filter="{ ACCOUNT_GLOBAL: 'text'}" sortable="'ACCOUNT_GLOBAL'">
        { accountMap.ACCOUNT_GLOBAL }}
      </td>
    </tr>
  </table>
</div>

JS File:

var app = angular.module('myApp', [ 'ngTable']);
app.controller('AccountMappingCtrl', ['$scope', '$http','$cookies', 'NgTableParams',  function($scope, $http, $filter, NgTableParams) {  

$http.get("http://localhost:52087/api/accountmapping")
    .then(function(response) {
    var convertJson = angular.fromJson(response.data);
    var self = this;
    var data = convertJson;
    self.tableParams = new NgTableParams({}, { dataset: data});
    });
});

Answer 1

var myApp = angular.module('myApp',["ngTable"]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl',function($scope,NgTableParams){
	 $scope.name = 'Superhero';
   var data = [{
    "ACCOUNT_LOCAL":"9007","COMPANY_ID":"10001",
    "ACCOUNT_GLOBAL":"100001","IC_PARTNER":"9008",
    "ACCOUNT_GLOBAL_DESC":"AUS GLOBAL",
    "ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK",
    "ACTIVE":true
},        
{
    "ACCOUNT_LOCAL":"9008","COMPANY_ID":"10001",
    "ACCOUNT_GLOBAL":"100001","IC_PARTNER":"9009",
    "ACCOUNT_GLOBAL_DESC":"AUS GLOBAL",
    "ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK",
    "ACTIVE":true
},{
    "ACCOUNT_LOCAL":"9014","COMPANY_ID":"10001",
    "ACCOUNT_GLOBAL":"100001","IC_PARTNER":"TEST",
    "ACCOUNT_GLOBAL_DESC":"AUS GLOBAL",
    "ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK",
    "ACTIVE":true
}]
//your HTTP call here
  $scope.tableParams = new NgTableParams({}, { dataset: data});
}) 

<div ng-app="myApp" ng-controller="MyCtrl">
  Hello, {{name}}!
  
   <table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="accountMap in $data">
      <td title="'IC_PARTNER'" filter="{ IC_PARTNER: 'text'}" sortable="'IC_PARTNER'">
        {{ accountMap.IC_PARTNER }}
      </td>
      <td title="'ACCOUNT_GLOBAL'" filter="{ ACCOUNT_GLOBAL: 'text'}" sortable="'ACCOUNT_GLOBAL'">
        {{ accountMap.ACCOUNT_GLOBAL }}
      </td>
    </tr>
  </table>
  
  
</div>
<link rel="stylesheet"; href="https://unpkg.com/[email protected]/bundles/ng-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script>

There is type in your code { accountMap.ACCOUNT_GLOBAL }} should be {{ accountMap.ACCOUNT_GLOBAL }}

I have made fiddle of your test data. Please check this fiddle and it is working fine.