Hide Angular ngGrid when no items are given

I have an `ngGrid` that works fine so far. However, I would like to hide it when no items are given, so there is no data to show. What I have tried is: ``` <div class="gridStyle" ng-grid="gridOptions" ng-show="items.length > 0"> </div> ``` This works, it actually hides the grid when `items.length` is equal to `0`, but once I add data to the `items` array, the grid won't show. It also does not make a difference if I put the `ng-show` directive to an outer `div`: ``` <div ng-show="items.length > 0"> <div class="gridStyle" ng-grid="gridOptions"> </div> </div> ``` Any idea of what I am doing wrong? The responsible controller looks like this: ``` (function (root) { 'use strict'; root.app.controller('listItemsController', [ '$scope', 'myService', function ($scope, myService) { $scope.items = []; $scope.gridOptions = { columnDefs: [ { field: 'id', displayName: 'Id' }, { field: 'type', displayName: 'Type' }, { field: 'value', displayName: 'Value' } ], data: 'items', enableRowSelection: false }; $scope.$on('navigation::selectedItem', function (evt, selectedItem) { myService.getItems(selectedItem, function (err, items) { $scope.items = items; }); }); } ]); })(window); ``` Getting the items works perfectly, and setting them on the grid works perfectly as well - IF I omit the `ng-show` directive. UPDATE Okay, it seems to be a problem with the initial rendering. As in the beginning, there are no items, the CSS `display` property is set to `none`. Apparently this avoids correct rendering. If you override this by using ``` ng-hide: { display:block!important; } ``` in your styles, everything works as expected (except for the grid being hidden, of course).