Populate ng-grid by another grid selection

Question

I am trying to populate a ng-grid based on the JSON array returned from a selection of a first ng-grid. As of right now I can get the JSON array displayed onto the screen but I cannot navigate deeper into the JSON array or get anything to display in the second grid. I have the controller code attached and the plnkr can be found at http://plnkr.co/edit/nULoI4?p=info.

'use strict';

function ArticleDataCtrl($rootScope, $scope, articleDataService) {
  articleDataService
    .getArticles()
    .then(
      function(articles) {
        $rootScope.articles = articles;
        $scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
      });

  $scope.articleGrid = {
    data: 'articleGridItems',
    showGroupPanel: false,
    multiSelect: true,
    checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-click="getDeliveryLocations()" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
    showSelectionCheckbox: true,
    selectWithCheckboxOnly: true,
    enableColumnResize: true,
    selectedItems: [],
    columnDefs: [{
      field: 'soMerArticleNbr',
      displayName: 'Article'
    }, {
      field: 'soMerOrdQty',
      displayName: 'Qty'
    }, {
      field: 'soArtDeliveryCode',
      displayName: 'Delivery Code'
    }, {
      field: 'dsgnSysRecDesc',
      displayName: 'Description'
    }]
  };

//This is not being called on header template click
  $scope.getDeliveryLocations = function() {
    $scope.deliveryLocationData = $scope.commonDeliveryLocations;
  };

  $scope.selections = $scope.articleGrid.selectedItems;
  var jsonObject = JSON.stringify($scope.selections);
  //Thought a json problem occured here...was wrong
  $scope.test = jsonObject.deliveryLocations;


  $scope.deliveryGrid = {
    data: 'selections',
    showGroupPanel: false,
    multiSelect: false,
    columnDefs: [{
      displayName: 'Delivery Methods'
    }]
  };
}

myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
  'articleDataService', ArticleDataCtrl
]);

Answer 1

So instead of trying to use angular's built in checkboxes I used my own with a custom method on ng-click. Here is the code and the plunker demonstrating the functionality is http://plnkr.co/edit/nULoI4?p=info.

'use strict';

function ArticleDataCtrl($rootScope, $scope, articleDataService) {
  articleDataService
    .getArticles()
    .then(
      function(articles) {
        $rootScope.articles = articles;
        $scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
      });

  $scope.articleGrid = {
    data: 'articleGridItems',
    showGroupPanel: false,
    multiSelect: false,
    enableColumnResize: true,
    selectWithCheckboxOnly: true,
    columnDefs: [{
      /*
            headerCellTemplate: myHeaderCellTemplate,
            */
      cellTemplate: '<input id="checkSlave" name="articleCheckBox" ng-checked="master" type="checkbox" ng-click="getDeliveryLocation(row.entity)" />'

    }, {
      field: 'soMerArticleNbr',
      displayName: 'Article'
    }, {
      field: 'soMerOrdQty',
      displayName: 'Qty'
    }, {
      field: 'soMerUOIDesc',
      displayName: 'UOM'
    }, {
      field: 'soArtDeliveryCode',
      displayName: 'Delivery Code'
    }, {
      field: 'soMerShrtMerDesc',
      displayName: 'Description'
    }, {
      field: 'soMerDesc',
      displayName: 'Vendor'
    }]
  };

  $scope.getDeliveryLocation = function(deliveryLocation) {
    $scope.deliveryLocationData = deliveryLocation.deliveryLocation;
    for (var i = 0; i < $scope.deliveryLocationData.length; i++) {
      var locationId = $scope.deliveryLocationData[i].dlvryLocId;
      var locationDesc = $scope.deliveryLocationData[i].dlveryLocDesc;
      $scope.deliveryLocationData[i].dlvryLocId = locationId + locationDesc;
    }
    return $scope.deliveryLocationData;
  };

    return $scope.deliveryLocationData;
  };


  $scope.deliveryGrid = {
    data: 'deliveryLocationData',
    showGroupPanel: false,
    multiSelect: false,
    columnDefs: [{
      field: 'dlvryLocId',
      displayName: 'Delivery Methods'
    }]
  };

  $scope.customerGroup = {
    value: 'DIY'
  };
}

myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
  'articleDataService', ArticleDataCtrl
]);