Загрузка сетки 2 angular -ui в тот же контроллер смещает столбцы

Question

Я пытаюсь загрузить 2 ui-grid в одном контроллере с другим набором данных. Но по некоторым причинам первые столбцы таблицы смещены. Но второй стол выглядит хорошо. Если я использую фиксированную ширину, например 1000px, это работает. Но то же самое не работает, когда я даю ширину в%. Я также попробовал API $ scope.grid.core.handleWindowResize (). Но тщетно.

<div ng-show="auditHistory" style="border: 2px solid grey;width:100% !important;" id="audit-grid"
                 ui-grid="gridOptions" ui-grid-selection ui-grid-resize-columns ui-grid-exporter ui-grid-pinning ui-grid-auto-resize class="grid"></div>

<div class="col-xs-12 clearfix" ng-show="auditHistory" style="border: 2px solid grey;width:100% !important;" id="audit-grid1"
               ui-grid="gridOptions1" ui-grid-selection ui-grid-resize-columns ui-grid-exporter ui-grid-pinning ui-grid-auto-resize class="grid"></div>

$scope.gridOptions = {
            enableGridMenu: false,
            enableRowSelection: true,
            enableFullRowSelection: true,
            enableRowHeaderSelection: false,
            multiSelect: false,
            // rowHeight: 30,
            columnDefs: [
                {
                    field: 'newVersion',
                    displayName: 'Version',
                    width: '6%',
                    visible: true,
                    enableSorting: true,
                    enableFiltering: false,
                    enableColumnMenu: false
                },
                {
                    field: 'createdDate',
                    displayName: 'Date',
                    width: '7%',
                    visible: true,
                    enableSorting: true,
                    enableFiltering: false,
                    enableColumnMenu: false,
                },
                {
                    field: 'createdTime',
                    displayName: 'Time',
                    width: '7%',
                    visible: true,
                    enableSorting: true,
                    enableFiltering: false,
                    enableColumnMenu: false,
                },
                {
                    field: 'userName',
                    displayName: 'User Name',
                    width: '9%',
                    visible: true,
                    enableSorting: true,
                    enableFiltering: false,
                    enableColumnMenu: false
                },
                {
                    field: 'userRole',
                    displayName: 'Role',
                    width: '10%',
                    visible: true,
                    enableSorting: true,
                    enableFiltering: false,
                    enableColumnMenu: false
                },
                {
                    field: 'hostId',
                    displayName: 'Host Id',
                    width: '10%',
                    visible: true,
                    enableSorting: true,
                    enableFiltering: false,
                    enableColumnMenu: false
                },
                {
                    field: 'action',
                    displayName: 'Action',
                    width: '10%',
                    visible: true,
                    enableSorting: true,
                    enableFiltering: false,
                    enableColumnMenu: false
                },
                {
                    field: 'reasons',
                    displayName: 'Reason',
                    width: '12%',
                    visible: true,
                    enableSorting: false,
                    enableFiltering: false,
                    enableColumnMenu: false
                },
                {
                    field: 'comment',
                    displayName: 'Comment',
                    width: '20%',
                    visible: true,
                    enableSorting: false,
                    enableFiltering: false,
                    enableColumnMenu: false
                }
            ]
            onRegisterApi: function( gridApi ){
                 $scope.gridApi = gridApi;
               $interval( function() {
                 $scope.gridApi.core.handleWindowResize();
               }, 500, 10);
            }
        };