ng-grid меняет стиль при заполнении данных и делает их видимыми

Я изучаю компонент ng-grid Angularjs и столкнулся с довольно разочаровывающей проблемой. По сути, поток такой: страница загружается, и видна только кнопка. Нажата кнопка, и запрос AJAX получает данные json и привязывает их к сетке.

Вот что я вижу, когда впервые нажимаю кнопку:

Если я вообще изменю размер браузера, он вернется к правильному размеру:

Мой контроллер выглядит так:

myAppModule.controller('PodcastController', function ($scope, $http) {

    $scope.getData = function () {
        $http.get('/Home/PodcastDataAsJson').success(function (data) {
            $scope.podcasts = data;
        });

        $scope.gridVisibilty = 'gridStyle';
    };

    $scope.gridOptions = {
        data: 'podcasts',
        columnDefs: [
            { field: 'Id', displayName: 'Id' },
            { field: 'Name', displayName: 'Name' },
            { field: 'Artist', displayName: 'Artist' }
        ]
    };

    $scope.gridVisibilty = 'notDisplayed';

});

Представление выглядит следующим образом:

<div ng-app="gridExampleApp">
    <div ng-controller="PodcastController">

        <button ng-click="getData()">Click to get Data</button>

        <div id="datagrid" ng-grid="gridOptions" class="ng-class: gridVisibilty;"></div>

    </div>
</div>

Мой css выглядит так:

.notDisplayed 
{
    display: none;
}

.displayed 
{
    display: block;
    border: 1px solid rgb(212,212,212);
    width: 800px;
    height: 300px;
}

.gridStyle 
{
    display: block;
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

Я хотел бы знать, является ли это мной, или это ошибка, которую я должен зарегистрировать с помощью Angular ng-grid peeps.

Ваше здоровье