Integration of Ionic (Angularjs) and Devextreme Datagrid, failed to display data from $http JSON

I am developing an ionic application by using Angularjs. In my application, I have to integrate with devextreme component like Datagrid.

When I tried to put JSON locally and display in devextreme datagrid, it display perfectly. However, when I get JSON data from web services by using $http and display in devextreme Datagrid. It failed to display it but when I console out the data, I able to get the data and just unable to display it in Devextreme Datagrid component.

The following is my sample code

html code

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <div dx-data-grid="{
        dataSource: customers,
        keyExpr: 'ID',
        columns: ['toponymName', 'fcodeName', 'population'],
        sorting: { mode: 'single' },
        pager: { visible: true },
        paging: { pageSize: 10 },
        editing: {
            editEnabled: false,
            editMode: 'row',
            insertEnabled: false,
            removeEnabled: false
        },
        allowColumnReordering: true,
        allowColumnResizing: true,
        filterRow: { visible: true },
        searchPanel: { visible: false },
        selection: { mode: 'single' }
    }"></div>
  </ion-content>
</ion-view>

Controller Code

.controller('DashCtrl', function($scope,  $http) {

    $http({
         method : 'GET',
         url : 'http://10.194.121.224/MobileGo_WebAPI/api/MST_CUSTOMER',
         headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
          }
    }).then(function successCallback(response) {
        $scope.customers = response.data;
        console.log(response.data)
    }, function errorCallback(response) {
        console.log(response.statusText);
    });

    // var customers = [{
    //     ID: 1,
    //     CompanyName: "Super Mart of the West",
    //     CompanyHolder: "Chan Yoong Hon",
    //     City: "Bentonville",
    //     State: "Arkansas"
    // }, {
    //     ID: 2,
    //     CompanyName: "Electronics Depot",
    //     CompanyHolder: "Lee Kam Fei",
    //     City: "Atlanta",
    //     State: "Georgia"
    // }];
    // $scope.customers = customers;

})

Like what I tried it for comment code, hardcode of JSON file. It able to display successfully. If I get it from $http, it unable to display the data in dx-data-grid.

It's a timing issue. You have to call the refresh method after asynchronously loading data into your grid.

The widget cannot track changes made in the data source by a third party. To bring data in the widget up to date in this case, call this method. Data sources of lookup columns will be updated along with the main data source.

Source: Documentation

Soll all you need to do is to follow the steps described here and then call the refresh method on the widget.