Update angularJs directive scope variable on change parent scope

I am creating a directive in angularJS which will replace the element. I have a variable in parent scope which is bind to the element.

I want to update the directive scope variable on change the parent scope variable value.

The element is like below

<my-element attr-xyz="scope_variable"></myelement>

When I write the directive as below it give the updated value whenever scope variable update

.directive('myElement', function(){
    return function(scope, elem, attr){
        scope.$watch(attr.attrXyz, function(value) {
            console.log(value);
        });
    }
});

but when I write the same code like below it give the undefined value

return {
    scope: {attrXyz: '@'},
    restrict: 'E',
    replace: true,
    link: function(scope, element, attr, controller){
        scope.$watch(attr.attrXyz, function(value){
            console.log('value = '+value);
        });
    }
}