JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div data-ng-app="test" data-ng-controller="TestCtrl">
    <input type=text data-ng-model="text"></input>
    <p/>
    <span data-track-size="useSize">{{text}}</span>
    <p/>
    <span>{{size.w}}, {{size.h}}</span>
</div>

JavaScript

angular.module("test.directives", [])
    .directive("trackSize", ["$parse", function($parse) {
        return function(scope, element, attrs) {
            function callback() {
                var size = { w: element.width(), h: element.height() };
                scope[attrs.trackSize].call(scope, size);
            }
            element.on("resize", function() {
                console.log("resize");
                scope.$apply(callback);
            });
            callback();
        };
    }]);

angular.module("test", ["test.directives"]);

var TestCtrl = ["$scope", function($scope) {
    $scope.size = { w: 0, h: 0 };
    $scope.text = "";
    
    $scope.useSize = function(size) {
        console.log("callback");
        $scope.size = size;
    }
}];