ag-grid binding from service in external file

Question

I'm new to angular but I'm trying to use ag-grid. I currently have a service in one file and a controller in another. I'm able to see the grid column headers but I'm unable to get the data from my service to bind to the grid. Can someone let me know what I'm doing wrong.

I've tried to use the

gridOptions.datasource = myDataSource; -- from ag-grid site wasn't able to get it to work.

rmdsServices.js

(function () {
'use strict';
var rmdsServices = angular.module('rmdsServices', ['ngResource']);

rmdsServices.factory('rmds', ['$resource',
  function ($resource) {
      return $resource('/api/rmd/', {}, {
          query: { method: 'GET', params: {}, isArray: true }
      });
  }]);

})();

rmdsController.js

(function () {
angular
.module('rmdsApp', ['agGrid', 'rmdsServices'])
.controller('rmdsController', rmdsController)


rmdsController.$inject = ['$scope', 'rmds'];
function rmdsController($scope, rmds) {
    $scope._rmd = rmds.query();


    var columnDefs = [
        { headerName: "RMDID", field: "RMDID", width: 150, editable: true },
        //other columns defs

    ];


    var rowData = $scope._rmd;


    $scope.gridOptions = {
        columnDefs: columnDefs,
        enableFilter: true,
        angularCompileFilters: true,
        enableSorting: true,
        rowSelection: 'single',
        enableColResize: true,
        rowData : rowData,
        angularCompileRows: true
    };
};

})();

I've added the below in and I can see the objects returning back but they are still not binding to grid. When I put in alert I can see the objects coming back but doesn't bind to grid. Sorry I'm a bit new to angular.

Update:

        var rowdata = $scope._rmd;
    rmds.query().$promise.then(function (res) {
        $scope._rmd = res;            
    });

    $scope.gridOptions = {
        columnDefs: columnDefs,
        //enableFilter: true,
        //angularCompileFilters: true,
        //enableSorting: true,
        //rowSelection: 'single',
        //enableColResize: true,
        rowData: $scope._rmd
       // angularCompileRows: true
    };

Answer 1

Currently you are setting undefined value to your grid data. Instead you should set the $scope._rmd from the sucess call of your service call.

Code

rmds.query().$promise.then(function (res){
    $scope._rmd = res;
});

//directly assign scope variable which update the table onve it will have value
$scope.gridOptions = {
    columnDefs: columnDefs,
    enableFilter: true,
    angularCompileFilters: true,
    enableSorting: true,
    rowSelection: 'single',
    enableColResize: true,
    rowData : $scope._rmd,
    angularCompileRows: true
};