ng-grid does not take 100% width on page load but shows fine on resize

Question

The ng-grid with angular js does not take 100% width on page load. Here is my code:

    <tabs ng-cloak>
        <pane title="Test Plan">
            <tabs>
                <pane title="Include Tests">
                    <div ng-controller="includedTestPlanGridCntrl">
                        <div class="gridStyle" ng-grid="gridOptions"></div>
                    </div>
                </pane>
                <pane title="Excluded Tests">
                    <div ng-controller="excludedTestPlanGridCntrl">
                        <div class="gridStyle1" ng-grid="gridOptions"></div>
                    </div>
                </pane>
            </tabs>
        </pane>
        <pane title="Advanced Planning">
            Some text here
        </pane>
    </tabs>

The grid appears correctly if I resize.

Answer 1

This worked for me

$scope.gridOptions = {
        data: 'gridData',
        init:function(grid,$scope) {
            setTimeout(function() {
                $scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
                    $scope.gridOptions.$gridScope,
                    $scope.gridOptions.ngGrid
                );
            },1000);
        }
    };

Replace "gridOptions" with variable you use and bingo!

Answer 2

Try setting ng-if to only include the grid when there is data to show: (ng-hide did not work for me)

<div class="gridStyle" ng-grid="gridOptions" ng-if="myViewModel.Data.length"></div>

Source: https://github.com/angular-ui/ng-grid/issues/855

Related question: When ng-grid change visibility from invisible to visible by ng-hide, grid width not being re-calculated