$watch for element width inside directive

Question

I'm trying to $watch my element's width inside a directive:

appDrct.directive('setWidth', function($interval) {
    return {
        require: '?ngModel',
        link: function($scope, $elm, attr, ngModel) {

            $scope.$watch($elm.parent().width(), function() {
                console.log('Width changed');
            });
        }
     }
})

But it doesn't work...I know for a fact that my width changes (I tried with $interval to display the width and it changes)

Answer 1

Here's how you do it, you need to $watch the function expression:

$scope.$watch(function () {
        return $element[0].style.width;
       }, function(newVal, oldVal) {
        console.log('Width changed');
});

Fiddle