javascript - Angular JS directive not updating scope variable -

i'm trying build simple directive in angularjs accepts config options via attributes, if attributes not set, want set default values attributes.

here's how describe scope:

scope :  {             classes: '@',             progress: '@'          } 

these attribs displayed in view in following way:

<div class="{{classes}}">     <div style="width: {{progress}}%;" class="bar"></div> </div> 

in link function, try set default values in way:

link: function(scope, el, attrs)         {            console.log( scope.classes, scope.progress );            if (typeof scope.classes === 'undefined')                scope.classes = 'progress progress-warning';             if (typeof scope.progress === 'undefined')                scope.progress = 99;            console.log( scope.classes, scope.progress );         } 

here's console output:

undefined undefined progress progress-warning 99 

so, appears in scope value being set correctly. in actual html output, attributes not being rendered. here's resulting html:

<div class="">     <div class="bar" style="width: %;"></div> </div> 

however if supply these attributes inline when calling attribute html, e.g:

<my-directive data-progress="60" data-classes="progress" /> 

then shows fine:

<div class="progress" data-progress="60" data-classes="progress">     <div class="bar" style="width: 60%;"></div> </div> 

my question is, when call <my-directive />, why not set default values of progress , classes supposed to, link function? (and despite showing in console did)

try this:

link: function(scope, element, attrs) {     scope.classes = attrs.classes || 'progress progress-warning';     scope.progress = attrs.progress || 99; } 

and can ditch scope : { classes: '@', progress: '@' } part of directive.

i see you're having hard time writing directive. check out this one i've implemented recently. perhaps it'll wrap yours.