Window resize directive

I think you forgot to fire digest cycle by calling scope.$apply(); at the end of scope.onResize method

Anyways, I used following directive (took from HERE) that works for me:

Try to open debug view and change view height: Demo Fiddle

app.directive('resize', function ($window) {    return function (scope, element, attr) {        var w = angular.element($window);        scope.$watch(function () {            return {                'h': w.height(),                 'w': w.width()            };        }, function (newValue, oldValue) {            scope.windowHeight = newValue.h;            scope.windowWidth = newValue.w;            scope.resizeWithOffset = function (offsetH) {                scope.$eval(attr.notifier);                return {                     'height': (newValue.h - offsetH) + 'px'                    //,'width': (newValue.w - 100) + 'px'                 };            };        }, true);        w.bind('resize', function () {            scope.$apply();        });    }}); 

And usage:

 <div  ng-style="resizeWithOffset(165)"        resize         notifier="notifyServiceOnChage(params)"   >    /** ... */ </div>

Dummy controller method usage:

$scope.notifyServiceOnChage = function(){      console.log($scope.windowHeight);    };

[EDIT]

Here is demo without jQuery library by using innerHeight

Demo 3Fiddle

Since we work with a directive, we can always do some DOM manipulation by changing the height of the element inside the directive.

Example:

var app=angular.module('App', []);app.directive('elheightresize', ['$window', function($window) {    return {        link: function(scope, elem, attrs) {            scope.onResize = function() {                var header = document.getElementsByTagName('header')[0];                elem.windowHeight = $window.innerHeight - header.clientHeight;                $(elem).height(elem.windowHeight);            }            scope.onResize();            angular.element($window).bind('resize', function() {                scope.onResize();            })        }    }}])

Live example: http://jsfiddle.net/choroshin/FJvyb/

It's been a while since you asked and you seem to have gotten your workaround solution... but you also ask why ng-style didn't work:

ng-style, from the Angular docs

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

So in your ng-style example you are providingheight : 375; (that is if windowHeight evaluated to 375) and thats not a proper value.

It should be like you have done in your workaround and have units.

windowHeight = ($window.innerHeight - header.clientHeight) + "px";