ui-grid ng-style dynamic height - height

Question

I got a simple grid used like this :
<div id="planningGridDiv"
class="gridPatientContent"
style="height: 450px;min-height: 300px;"
ng-style="{height: showScores ? '150px': '450px'}"
ui-grid-resize-columns
ui-grid-selection
ui-grid-cellNav
ui-grid-pinning
ui-grid="myData"
class="grid">
</div>
But when showScores is true and height pass from 450 to 150 px, the grid itself doesn't shrink.
The first container see its height changed, but this part no :
<div role="grid" ui-grid-one-bind-id-grid="'grid-container'" class="ui-grid-render-container ng-isolate-scope ui-grid-render-container-body" ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }" ui-grid-render-container="" container-id="'body'" col-container-name="'body'" row-container-name="'body'" bind-scroll-horizontal="true" bind-scroll-vertical="true" enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar" enable-vertical-scrollbar="grid.options.enableVerticalScrollbar" aria-multiselectable="true" id="1490734763451-grid-container" style="margin-left: 180px; margin-right: 80px;">
I can't find any solution on doc nor stack overflow, but it seems to me that it should. I can use some help for some pointers.

Answer 1

FYI, I found a solution on another stackoverflow question, but I changed it a bit to fit my needs :
$scope.showScoreDiv = function()
{
$scope.showScores = !$scope.showScores;
$timeout(function(){
$scope.gridApi.grid.handleWindowResize();
}, 1);
};
So the main idea is to change the height via ng-style on the grid div, and when you fire your event, here showScores = true called by showScoreDiv(), you have to call gridApi.grid.handleWindowResize().
The timeout is just here to give some time to the div to be set to the good height before calling handleWindowResize().