Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<div ng-controller="MyCtrl">
  <table>
  <tr>
    <th>
      category
    </th>
     <th>
      no of bills
    </th>
     <th>
      commulative amount
    </th>
     <th>
      response
    </th>
  </tr>
  <tr ng-repeat="(key,value) in tableData.data">
        <td>{{key}}</td>
            <td><div class="bg">{{value.NumberOfBills}}</div></td>
            <td><div class="bg">{{value.CummalativeBillAmount}}</div></td>
            <td><div class="bg">{{value.ResponseProgress}}</div></td>
          </tr>
  </table>
</div>

JavaScript

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

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.tableData={

        "KEY-1": "VALUE-1",

        "KEY-2": "VALUE-2",

        "data": {

            "PAY ALL": {

                    "NumberOfBills": "1800000",

                    "CummalativeBillAmount": "45000000",

                    "ResponseProgress": "60"

                },
                "PAY PART": {

                    "NumberOfBills": "6000000",

                    "CummalativeBillAmount": "15000000",

                    "ResponseProgress": "20"

                },
                "DECLINE": {

                    "NumberOfBills": "3000000",

                    "CummalativeBillAmount": "7500000",

                    "ResponseProgress": "10"

                },
                "REQUEST EXTENSION": {

                    "NumberOfBills": "240000",

                    "CummalativeBillAmount": "6000000",

                    "ResponseProgress": "8"

                }

    }

}
});