Angular: Empty Fiddle

http://angularjs.org/

by marco_m_alves

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>
    
    <floater id="ud" class="floater"></floater>
</div>

CSS

.floater {
    position: absolute;
    top: 30%;
    left: 30%;
    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) {


    $scope.update = function() {
        $scope.debug = document.getElementById('ud').clientWidth;
    };
}

myApp.directive('floater', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            scope.debug = 'first time';
            scope.elef = element[0].clientWidth;
            scope.$watch(

            "elef", function(val) {
                console.log(val);
                scope.debug = val;
            }, true);
        }
    }
});