Show 2 different tables using ng-repeat using custom directives

Question

I have a custom directive (which generates a table) that repeats twice on my index page. Table values ​​are populated with the $ scope.globalrows variable. Despite the fact that globalrows contains 2 array values, it always prints the second value. How to modify my template or directives to show values ​​unique to this table and prevent overwriting the contents.

Question: Tables are repeated twice with the second contents of the table in globalarray. I see the second table overwrites the first table.

index.html

<grid-print section="1"></grid-print>
<grid-print section="2"></grid-print>

template: print.dir.html

<form class="form-horizontal clearfix">
    <table class="grid table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="col in cols">{{col.title}}</th>
        </tr>
      </thead>
      <tbody>
          <tr ng-repeat="row in globalrows track by $index" index={{index}}>
            <td ng-repeat="col in cols">          
              <span>{{ row[col.field] }}</span>
            </td>  
          </tr>
      </tbody>
    </table>
    </form>

directive:

.directive("gridPrint", function($sessionStorage, dataservice) {
    return {
        restrict: 'E',
        templateUrl: "components/print/templates/print.dir.html",
        replace: true,
        controller: function($scope, $state, $attrs) {
            //array of the items that are to be displayed on the 2 tables  
            $scope.globalrows = dataservice.getCollectionData();          

        },
        link: function(scope, element, attributes){
           // console.log("in grid print"+attributes['section']);            
        }
    };
})

Another directive that generates strings is cols:

.directive("grid", function() {
    return {
        restrict: 'E',
        templateUrl: "components/section/directives/section.shared.dir.html",
        replace: true,
        controller: function($scope) {
            $scope.$on('ready-to-render', function(e, rows, cols) {
               // console.log(rows, cols);
                $scope.globalrows.rows = rows;
                $scope.cols = cols;
            });
        }
    };
})

globalrows array

Answer 1

, . , .

, scope: { ... }, . data1 data2 - , . , , controller, Component. , .

<grid-print section="1" columns="cols" table-data="data1"></grid-print>
<grid-print section="2" columns="cols" table-data="data2"></grid-print>

 // If its simple hardcoded data arriving from method then use below
 // $scope.globalrows = dataservice.getCollectionData();
 // $scope.data1 = $scope.globalrows[0];
 // $scope.data2 = $scope.globalrows[1];
 // If data is comming from promise, the do following thing.
 dataservice.getCollectionData().then(function(data){
       $scope.globalrows = data;
       $scope.data1 = $scope.globalrows[0];
       $scope.data2 = $scope.globalrows[1];
});

$scope.cols = $scope.columns; //this would be array of columns.

.directive("gridPrint", function($sessionStorage, dataservice) {
    return {
        restrict: 'E',
        templateUrl: "components/print/templates/print.dir.html",
        replace: true,
        scope: {
           tableData: '=', //table data will set by directive consumer
           columns: '=' // no need for named attributes
        },
        link: function(scope, element, attributes){
            // do DOM manipulation here if required.            
        }
        controller: function($scope) {
            // It possible the data is not filled yet, because you gain the data from a service (which is asynchronous), 
            //so just initialize with empty array
            if(angular.isUndefined($scope.tableData)){
              $scope.tableData = [];
            }
            if(angular.isUndefined($scope.columns)){
              $scope.columns = [];
            }
        }
    };
})

: print.dir.html

<form class="form-horizontal clearfix">
<table class="grid table table-bordered">
  <thead>
    <tr>
      <th ng-repeat="col in columns">{{col.title}}</th>
    </tr>
  </thead>
  <tbody>
      <tr ng-repeat="row in tableData track by $index" index={{index}}>
        <td ng-repeat="col in columns">          
          <span>{{ row[col.field] }}</span>
        </td>  
      </tr>
  </tbody>
</table>
</form>

Plunkr