angularjs div css update on window resize

http://stackoverflow.com/questions/27439963

HTML

<div ng-app="myapp">
    <div id=header>I am the headergffkhgfjgjghfjfjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjh</div>
    <div id="content" resize1>I am the content dkhkhjkjghkhgkgjhgiv</div>
    <div id=footer>I am the footer</div>
</div>

CSS

#header {
    height: 5%;
    min-height: 25px;
    max-height: 100px;
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    background-color: #989898;
}
#content{
    top: 7%;
    right: 0;
    bottom: 7%;
    left: 0;
    position:absolute;
    background-color: rgba(248,38,82,0.7);
    z-index: 99;
}
#footer {
    height: 5%;
    min-height: 25px;
    max-height: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background-color: #989898;
}

JavaScript

var myapp = angular.module('myapp', []);

myapp.directive('resize1', function($window) {
    return function(scope, element, attr) {
        var w = angular.element($window);
        w.on('resize', function() {
            var hh = document.getElementById('header').offsetHeight;
            var fh = document.getElementById('footer').offsetHeight;
            console.log('hh & fh', hh, fh);                    

            var tp = hh + 2;
            var bt = fh + 2;
            console.log('tp & bt', tp, bt);                
            
            var changes = {
                bottom: bt + 'px',
                top: tp + 'px',
            }
            element.css(changes);
            scope.$apply();
        });
    };
});

myapp.directive('resize2', function($window) {
    return {
        restrict: 'A',
        scope:{},
        link:function (scope, element, attrs) {
            scope.$watch(function(){return $window.innerHeight;}, 
                function () {
                    var hh = document.getElementById('header').offsetHeight;
                    var fh = document.getElementById('footer').offsetHeight;
                    console.log('hh & fh', hh, fh);                    

                    var tp = hh + 2;
                    var bt = fh + 2;
                    console.log('tp & bt', tp, bt);                

                    var changes = {
                        bottom: bt + 'px',
                        top: tp + 'px',
                    }
                    element.css(changes);
                }, 
            true);
        }
    };
});