AngularJs directive for dynamically adjusting an element's height to fill the vertical height of the page

sq-content.d.coffee

angular.module('utils')
    .directive('sq-content', [
        '$log'
        '$window'
        ($log, $window) ->
            restrict: 'A'
            link: (scope, elem, attrs) ->
                # Calculates and sets the height of element to fully take up
                # the rest of the vertical height in a page
                # Mainly used for activating overflow: scroll for md-content
                # elements (since they don't work with flex for some reason)
                # Requires: jQuery
                # Requires: 'debounce' from underscore.js

                @resize = () ->
                    $log.debug '[sqContent resize]'
                    if $(window).width() < $(window).height()  # Portrait
                        offsetTop = $(elem).offset().top
                        windowHeight = $(window).height()

                        $(elem).height(windowHeight - offsetTop)

                    else if $(window).width() >= $(window).height()
                        $(elem).css('height', '100%')

                $window.addEventListener('resize', _.debounce(@resize, 100))

                @resize()
                return
    ])