Angular ui grid does not show content unless browser window is resized
<p>I am using angularjs 1.5.0 with angular ui grid 3.1.1. 
When I assign gridOptions (passed to the grid directive) object in controller body like this:</p>

<pre><code>$scope.gridOptions = {
      data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ]
    };
</code></pre>

<p>HTML:</p>

<pre><code>    &lt;div ui-grid="gridOptions"&gt;&lt;/div&gt;
</code></pre>

<p>It displays the table as expected. But when I try to change data inside $scope.on: </p>

<pre><code>$scope.$on('update', function (event, passedFromBroadcast) {
      $scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
    });
</code></pre>

<p>It renders only frame of the table, when including pagination it will also render pagination related controls - but not the content itself. 
Content (the rows and column headers) appear only after I resize my browser window.</p>

<ol>
<li><strong>Why doesn't angular-ui grid update table content when the data changes inside $scope.on?</strong></li>
<li><p><strong>How can I manually update the angular ui grid table?</strong>
Things I already tried: </p>

<pre><code>$scope.gridApi.core.handleWindowResize(); // Does not work
$scope.gridApi.core.refresh(); // Does not work
$timeout(function(){$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;}) // Does not work
</code></pre></li>
</ol>