give default values to optional attributes in directive in angularjs -

i trying give default values directive has optional attributes. giving default values in scope.init() method shown below. dont see default values reflected in view. if try scope.$apply(), says digesting :) doing wrong?

angular.module('noi.questionoptions', ['noi.filters'   //'ui.bootstrap' ]).directive('noiquestionoptions', ['$filter', '$log', function($filter, $log){     'use strict';      var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];     var romans = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix','x'];     return {         restrict: 'ea',         scope: {             // have .text attribute , optionall index              options: "=noioptions",             // default )              separator: '@?noiseparator',             // 1 of alpha, numeric, roman, defaults numeric             indextype: '@?noiindextype',             // vertical or horizaontal, default horizontal             orientation: '@?noiorientation',             // upper or lower, default upper             indexcase: '@?noiindexcase'         },         templateurl: 'noi.questionoptions.html',         controller: function($scope, $element, $attrs){             var scope = $scope;                         scope.isindexupper = function(){                 return scope.indexcase == 'lower' ? false : true;             };             scope.ishorizontal = function(){                 return scope.orientation == 'vertical' ? false : true;             };             scope.init = function(){                 if (!angular.isdefined($scope.indexcase)) {                     $scope.indexcase = 'upper';                                };                  if (!angular.isdefined($scope.separator)) {                     $scope.separator = '.';                     //scope.separator = ')';                 }                  if (!angular.isarray($scope.options)) {                     //$log.log('not array');                     return;                 }                 angular.foreach($scope.options, function(opt, i){                     if (angular.isdefined(opt.index)) {                         //return;                     }                                         if ($scope.indextype == 'roman') {                         opt.index = romans[i];                     } else if ($scope.indextype == 'alpha') {                         opt.index = letters[i];                     } else {                         opt.index = i;                     }                                     });             };             scope.init();             //$log.log("aaa" + scope.options);               $log.log(scope.options);             //scope.$apply();         },         link: function(scope, element, attrs) {            }     }; }]); 

here template

<ul class="list-unstyled " ng-class="{'list-inline':ishorizontal()}">     <li ng-repeat="opt in options"> {{opt}}         <span ng-class="{'text-uppercase':isindexupper(), 'text-lowercase':!isindexupper()}"               >{{opt.index}} {{ separator}}</span> {{opt.text}}     </li> </ul> {{separator}} - {{indextype}} - {{orientation}} - {{indexcase}} - {{options}}   

these expressions below /ul (except {{options}}) show nothing. {{options}} not show .index attribute add in foreach loop above. however, can see on console options have .index attributes

--- actual template js file --- (no issue loading template)

angular.module('erdal').run(['$templatecache', function($templatecache) {   'use strict';    $templatecache.put('noi.questionoptions.html',     "<ul class=\"list-unstyled\" ng-class=\"{'list-inline':ishorizontal()}\"><li ng-repeat=\"opt in options\">{{opt}} <span ng-class=\"{'text-uppercase':isindexupper(), 'text-lowercase':!isindexupper()}\">{{opt.index}} {{ separator}}</span> {{opt.text}}</li></ul>{{separator}} - {{indextype}} - {{orientation}} - {{indexcase}} - {{options}}"   );  }]); 

this dom includes directive

<div data-noi-question-options           noi-options="[{text:'ankara'}, {text:'istanbul'}, {text:'antalya'}, {text:'izmir'}]"                   ></div> 

i removed whole scope.init() ... , replaced these

scope.$watch('indextype', function(newval, oldval, scope){         //console.log(newval + ' ' + oldval);         if (!angular.isdefined(newval)){             scope.indextype = 'upper';         }     });     scope.$watch('separator', function(newval, oldval, scope){         //console.log(newval + ' ' + oldval);         if (!angular.isdefined(newval)){             scope.separator = ')';         }     });      scope.$watch('options', function(newval, oldval, scope){         if (!angular.isarray(scope.options)) {             //$log.log('not array');             return;         }         angular.foreach(scope.options, function(opt, i){             if (angular.isdefined(opt.index)) {                 return;             }                                 if (scope.indextype == 'roman') {                 opt.index = romans[i];             } else if (scope.indextype == 'alpha') {                 opt.index = letters[i];             } else {                 opt.index = i;             }                             });     }); 

very explanation on page same problem.. https://groups.google.com/forum/#!msg/angular/la2oxi8-pdy/n-0daq4c1g4j

in short, interpolated attributes set after digest cycle , overwriting default value.