How to make ui-grid responsive with the height in AngularJS

I'm trying to make my grid responsive, not for mobile, just for when a user resize the window. I'm using the ui-grid auto resize, but it only resizes the width. The height doesn't change.

I've tried to add a directive

app.directive('resize', ['$window', function ($window) {
return function (scope, element, attr) {

    var w = angular.element($window);
    scope.$watch(function () {
        return {
            'h': window.innerHeight,
            'w': window.innerWidth
        };
    }, function (newValue, oldValue) {
        scope.windowHeight = newValue.h;
        scope.windowWidth = newValue.w;
        debugger;
        scope.resizeWithOffset = function (offsetH) {
            scope.$eval(attr.notifier);
            return {
                'height': (newValue.h - offsetH) + 'px'
            };
        };

    }, true);

    w.bind('resize', function () {
        scope.$apply();
    });
}
}])

and my grid

  <div ui-grid="gridOptions" class="grid testTrans nopadding" ui-grid-selection ui-grid-auto-resize ui-grid-exporter ui-grid-move-columns ng-style="resizeWithOffset(pageOffSetY)" rezise>
                <div class="well grid-loading" ng-show="grid.rows.length == 0">
                    <i class="fa fa-spin fa-spinner"></i>
                    <strong>Data Loading...</strong>
                </div>

            </div>

I've put some debuggers in my code, but it never passes through.