AngularJs onsizechanged, onresize, on element resize directive, angularjs responsiveness

1. usage.html

<div on-size-changed="logResize">
    Foo
</div>
     

2. usage.js

module.controller('SomeCtrl', function ($scope) {
    $scope.logResize = function () {
        console.log('element resized');
    };
}

onSizeChanged.js

'use strict';

module.directive('onSizeChanged', ['$window', function ($window) {
    return {
        restrict: 'A',
        scope: {
            onSizeChanged: '&'
        },
        link: function (scope, $element, attr) {
            var element = $element[0];

            cacheElementSize(scope, element);
            $window.addEventListener('resize', onWindowResize);

            function cacheElementSize(scope, element) {
                scope.cachedElementWidth = element.offsetWidth;
                scope.cachedElementHeight = element.offsetHeight;
            }

            function onWindowResize() {
                var isSizeChanged = scope.cachedElementWidth != element.offsetWidth || scope.cachedElementHeight != element.offsetHeight;
                if (isSizeChanged) {
                    var expression = scope.onSizeChanged();
                    expression();
                }
            };
        }
    }
}]);

this only fires on window resize, not on element size change