UI Grid Angular, grid renders but doesn't display data

I figured it out, and it appears that my problem was a mixture of two things.

1. The incoming JSON was a string, I'm not 100% sure if I needed to convert to an object by using JSON.parse then pass it along to the $scope.gridOptions.data but that could've been the issue for the code I posted in my original question above.

2. After more research I found a great in-depth example in the official Angular UI Grid docs. Following this technique i was able to get the data rendered correctly.

   var rowCount = 0;
   var i = 0;
   $scope.refreshData = function () {
       $scope.loading = true;
       $scope.myData = [];
   
       $http.get('/Home/GetAllData')
           .success(function (response) {
               var jsonObj = JSON.parse(response);
               rowCount = jsonObj.length;
   
               jsonObj.forEach(function (row) {
                   row.id = i; i++;
                   $scope.myData.push(row);
               });
               $scope.loading = false;
   
           })
           .error(function() {
               $scope.loading = false;
               console.log("Error retrieving data.");
           });
    };
   

In the example it makes use of a string value in gridOptions.data called myData which refers to an object on your scope to watch. So what I'm doing is just pushing each row once the GET request completes.

The full example is Here via Punklr.