angularjs - Initializing @attr in Angular directive -

i have directive this: can see equivalent plunker here http://plnkr.co/edit/0e2nmyatamd3m3qtctls

app.directive('bptest', function() {   return {     restrict: 'a',     templateurl: 'directivetemplate.html',     scope: {       bptype: '@'     },     link: function($scope, $elem, $attrs) {       console.log($scope, $elem, $attrs);       $scope.bptype = $scope.bptype || 'text';     }  // link function   }; }); 

in directivetemplate.html:

<div>   {{ bptype }} </div> 

in index.html:

<div bp-test bp-type="text"></div>  <!-- results in <div>text</div> --> <div bp-test bp-type="number"></div>  <!-- results in <div>number</div> --> <div bp-test></div>  <!-- results in <div></div> ????? --> 

since initialize $scope.bptype = $scope.bptype || 'text', expect third directive <div bp-test></div> display <div>text</div> spits out <div></div>.

what misunderstanding/doing wrong?

thanks!

the scope binding happens later first call link function need watch attribute set default value.

$scope.$watch("bptype", function(value) {   $scope.bptype = value || 'default'; });