Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<div ng-controller="MyCtrl">
            
    Position of box {{debug}}
    <button ng-click="update()">update</button>
    <br>
    <span class="light">Position should update automatically when change the size of the display window... <br> But it doesn't. Only when clicking the update button.</span>
    
    <div id="ud" class="floater"></div>
</div>

CSS

.floater {
    position: absolute;
    top: 30%;
    left: 70%;
    width: 30%;
    height: 30%;
    background-color: whitesmoke;
    border: thin solid lightgray;
}

.light { color: grey}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    
    function position( elem ) {
    var left = 0,
        top = 0;

    do {
        left += elem.offsetLeft;
        top += elem.offsetTop;
    } while ( elem = elem.offsetParent );

    return [ left, top ];
}
    
    $scope.$watch(
        function(){ return position(document.getElementById('ud')); },
        function(val) { $scope.debug = val; },
        true
    );
    
    $scope.update = function() {
        $scope.debug = position(document.getElementById('ud'));
    };
    
    angular.element(window).bind('resize', function(){
        $scope.$digest();
    });
}