Can't get selected rows with Angular UI Grid

Question

I have two grids that have rows I can select. I want to be able to get the data in the selected rows into another data object so that I can pass it to a backend service. Here is the relevant code:

angular.module('gridPanel',['ui.bootstrap','ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.selection'])
.controller('GridPanelController', function($scope, $log, referenceDataService){

    $scope.nameGrid = {
        enableRowSelection: true,
        enableRowHeaderSelection: false,
        multiSelect: true,
        onRegisterApi: function(gridApi) {
            $scope.gridApiNames= gridApi;
        },
        columnDefs: [
            {name: 'Name', field: 'name'}
            {name: 'Description', field: 'description'}
        ],
        data:[]
    };

    $scope.regionsGrid = {
        enableRowSelection: true,
        enableRowHeaderSelection: false,
        multiSelect: true,
        onRegisterApi: function(gridApi) {
            $scope.gridApiRegions = gridApi;
        },
        columnDefs: [
            {name: 'Region', field: 'region'}
        ],
        data:[]
    };

    referenceDataService.getAllNames().then(function (data){
        $scope.nameGrid.data = data;
    });

    referenceDataService.getRegions().then(function (data){
        $scope.regionsGrid.data = data;
    });

    $scope.debug = function(obj) {
        var dataObj = {
            names: [],
            regions: []
        };

        dataObj.regions = $scope.gridApiRegions.selection.getSelectedRows();
        dataObj.names= $scope.gridApiNames.selection.getSelectedRows();

        $log.log(JSON.stringify(dataObj, null, 4));
    };
});

However, when I check to see what the log says in console, it shows me that dataObj.regions and dataObj.names are both blank arrays. The data shows up fine in the actual tables, and nothing goes wrong when I click on them - I can select multiple rows without issue. The problem only comes when I click on the submit button, which for now directs to $scope.debug so that I can look at the objects in console. I have other fields in the form, mostly text fields, that also display fine when I click on debug in the console log, so the only place with an issue is getting selected rows. Thanks in advance!

edit: also, when I try to log just the 'getSelectedRows' part, it returns a blank array.

Answer 1

Found the problem. It's because I was using the same grids elsewhere on the webpage (within a modal) to display the same information. Once I made two sets of grids, the problem was fixed. Still seems kind of inefficient to have two sets of the same grids that serve the same purpose, but I guess maybe that's just how it is or something?