Writing to @ property in link function

Writing to @ property and retrieving its value with $observe

by yoorek

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<body ng-app="app">
    <p test="HELLO"></p>
    <p class="scope"></p>
    <p class="attrs"></p>
    <p class="interpolated"></p>
</body>

JavaScript

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

app.directive("test", function () {
    return {
        scope: {
            test: '@'
        },
        template: '<p>Interpolated value = {{ test }}</p>',
        controller: function ($scope) {
            $scope.test = "override in controller";
        },
        link: function (scope, element, attrs) {
            debugger;

            $("p.attrs").text("attrs.test = " + attrs.test);
            $("p.scope").text("scope.test = " + scope.test);

            attrs.$observe('test', function (value) {
                $("p.interpolated").text("interpolated.test = " + value);
            });
        }

    }
})