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

Question

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.

Answer 1

What worked for me is also resize wrapper:

 <div  layout="row" flex style="margin: 0;position: relative;" 
        ng-style="resizeWithOffset(323)" resize >

                                    <div  ui-grid="gridOptions" 
                                          class="wm-dashboard-grid"
                                          style="position: absolute;
                                                    top: 0;
                                                    left: 0;
                                                    right: 0;
                                                    bottom: 0;"
                                          ng-style="resizeWithOffset(325)" resize
                                          ui-grid-auto-resize
                                          ui-grid-pagination
                                          ui-grid-selection
                                          ui-grid-resize-columns>
                                    </div>

                                </div>

DEMO PLUNKR

Just resize the screen