Why is this scoped attribute is not available in the link function

I'm trying to create a directive, where I need some additional details which has to be passed as attributes for the elements.

These values are of static nature. ie: there won't be any scoped reference in the parent scope (It is a boolean value)

In the directives link function I need these attributes to be accessible in the link function of the directive, but the value is coming as undefined.

Mark up:

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <div my-directive local-attr="attribute" local-ref="ref">
        </div>
    </div>
</div>

JS:

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

myApp.directive('myDirective', function(){
    return {
        scope: {
            localAttr:'@',
            localRef:'='
        },
        link: function(scope, iElement, iAttrs, controller) {
            console.log(scope.localAttr, scope.localRef);
        }
    };
});

myApp.controller('MainCtrl', ['$scope', function($scope){
    $scope.ref="reg"
}]);

In this demo, I need to get the value attribute for scope.localAttr in the link function.

Demo: Fiddle

If value is 100% static, you can use iAttrs.localAttr (and you can skip bind in scope: {..})

if value should be interpolated (there is {{...}}) you should use iAttrs.$observe('localAttr', cb) (and also you can skip mentioning it in scope: {...})

If you would like to do some manipulations with other scope properties, you should $scope.watch('localAttr', cb).

It could be even expected that during linking scope could be not fully constructed. In AngularJS documentation about 'scope' parameter of link function there is

The scope to be used by the directive for registering watches.

http://docs.angularjs.org/guide/directive

So generally you can only register watchers, and not get values.

I'm note sure if this is a bug in AngularJS or if it's the intended behavior, but scope.localAttr isn't set when your linking function gets executed. But if you change: console.log(scope.localAttr, scope.localRef); to: console.log(scope, scope.localAttr, scope.localRef); and you inspect the scope object, you'll see that scope.localAttr gets set, but that seems to happen after the linking function is called since scope.localAttr inside the linking function is undefined.