title: UI Grid Angular, grid renders but doesn't display data
body: <p>What am I missing here? The grid renders with no errors, blank rows... I checked and JSON is coming in fine up to this point <code>$scope.gridOptions.data = response['data'];</code> It seems like its rendering the empty array and never getting to the actual data...</p>
  
  <pre><code>  app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
          $scope.myData = [];
          $scope.loading = true;
  
          $scope.gridOptions = {
              enableSorting: true,
              columnDefs: [
                { name: 'Id', field: 'PK_Inspection' },
                { name: 'Employee Id', field: 'EmployeeId' },
                { name: 'Employee Name', field: 'EmployeeName' },
                { name: 'Equipment Id', field: 'EquipmentId' },
                { name: 'Equipment Name', field: 'EquipmentName' },
                { name: 'Sequence', field: 'SequenceName' },
                { name: 'Details', field: 'SequenceDetails' },
                { name: 'Type', field: 'SequenceTypeName' },
                { name: 'Shift', field: 'ShiftName' },
                { name: 'Status', field: 'StatusName' }
              ],
              data:[]
          };
  
          $http.get('/Home/GetAllData')
              .then(function (response) {
                  $scope.gridOptions.data = response['data'];
              })
              .catch(function (err) {
                  $scope.loading = false;
                  console.log("Error Receiving Data.");
              })
              .finally(function () {
                  $scope.loading = false;
                  console.log($scope.gridOptions.data);
  
              });
  
      }]);
  </code></pre>
  
  <p>Data being passed over to <code>$scope.gridOptions.data</code>:</p>
  
  <pre><code>[
      {
          "PK_Inspection": 1,
          "EmployeeId": "4433112",
          "EmployeeName": "",
          "EquipmentId": "1122113",
          "EquipmentName": "",
          "SequenceName": "UNIT 1",
          "SequenceDetails": "Bent, Dented, Broken, Torn or Deformed Parts.",
          "SequenceTypeName": "Visual Inspection",
          "ShiftName": "Day",
          "StatusName": "OK"
      },
      {
          "PK_Inspection": 2,
          "EmployeeId": "4433112",
          "EmployeeName": "",
          "EquipmentId": "1122113",
          "EquipmentName": "",
          "SequenceName": "UNIT 2",
          "SequenceDetails": "Charge, Water Levels, Vent Caps in place, Power Disconnect works.",
          "SequenceTypeName": "Visual Inspection",
          "ShiftName": "Day",
          "StatusName": "OK"
      }
  ]
  </code></pre>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
      &lt;i class="fa fa-spinner fa-spin text-center" ng-show="loading"&gt;&lt;/i&gt;
      &lt;div id="mainGrid" ui-grid="gridOptions" ui-grid-edit class="myGrid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/TPsiM.png" alt="enter image description here"></p>