How to create multiple ui grid dynamically with ng-repeat in html page?

Question

I am using an ng-repeat loop inside my html page like this

<li class="list-group-item" ng-repeat="obj in Students">
   <div class="grid" id="{{'grid'+$index}}" ui-grid="{{'griddata'+$index}}" 
        ui-grid-selection ui-grid-pagination>
   </div>
</li>

And here is my script to create ui grid dynamically

$scope.CreateGrids = function () {
    debugger;
    for (var count = 0; count < $scope.StudentList.length; count++) {

        var studentData = "griddata"+count;

        $scope[studentData] = [];

        // defining the grid control
         $scope[studentData] = {
            enableRowSelection: false,
            //grid pagination
            paginationPageSizes: [10, 25, 50, 75],
            paginationPageSize: 10,
            enableSorting: true,
            //enabling filtering
            enableFiltering: false,
            multiSelect: false,

            //column definations    
            columnDefs: [
                 { name: 'SubjectID', displayName: 'SubjectID', visible: false },
                 { name: 'SubjectName', displayName: 'Subject Name' },
                 { name: 'MarksObtained', displayName: 'Marks' },
                 ]                       
        };

          $scope[studentData].data = $scope.StudentList[count].Student;
    }
};

But after so many hit and trial, I am not able to create the grid. How can I achieve it ? Thanks in advance.

Answer 1

Here is the solution please check plunkr link

HTML code

    <li class="list-group-item" ng-repeat="obj in data">
       <div class="grid" id="{{'grid'+$index}}" ui-grid="{data:data['griddata'+$index].columnDefs}" 
            ui-grid-selection ui-grid-pagination>
       </div>
    </li>
    </

JS code

    $scope.StudentList = [1, 2, 3, 4, 5];
    $scope.data = {};
    $scope.CreateGrids = function() {
      for (var count = 0; count < $scope.StudentList.length; count++) {
        var studentData = "griddata" + count;
        $scope.data[studentData] = [];
        // defining the grid control
        $scope.data[studentData] = {
          enableRowSelection: false,
          //grid pagination
          paginationPageSizes: [10, 25, 50, 75],
          paginationPageSize: 10,
          enableSorting: true,
          //enabling filtering
          enableFiltering: false,
          multiSelect: false,
          //column definations    
          columnDefs: [{
            name: 'SubjectID',
            displayName: 'SubjectID',
            visible: false
          }, {
            name: 'SubjectName',
            displayName: 'Subject Name'
          }, {
            name: 'MarksObtained',
            displayName: 'Marks'
          }, ]
        };
        $scope.data[studentData].data = $scope.StudentList[count].Student;
      }
    };

    $scope.CreateGrids();

Hope this will help you