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" ng-init="test='APP HELLO'">
    <p test="test"></p>
    <p class="scope">scope.test = </p>
    <p class="attrs">attrs.test = </p>
    <p class="interpolated">interpolated.test = </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").append(attrs.test);
            $("p.scope").append(scope.test);

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

    }
})