How get the text element before angular directive has changed it content -

i have simple span element text. want paste in html tag "span" text , directive "text-type". every 100 ms new symbol appear. so, first, have save span text in variable , show text directive:

<span data-text-type>just text</span> 

and want change text in directive

app.directive('texttype', function() { return {     restrict: 'a',     template: '{{newtext}}',     scope:{},     link: function(scope, element) {         var text = element.text().split(''); /*will '{{newtext}}', not 'just text'*/          scope.newtext = '';          (function fn () {                 if (text.length) {                     scope.textstr += text.shift();                     $timeout(fn, 100);                 }             }());      } } 

});

so, how can save text before directive change it?

i find needed use compile function return link function, , change "scope:{}" "scope:true" use isolate scope each element.

return {     restrict: 'a',     scope:true,     compile: function(element, attrs) {         var string = element.text().split(''),             max = string.length;            element[0].innerhtml ='<span class="tt-text">{{textstr}}</span><span class="tt-heading">{{textheading}}</span>';          return function(scope, element, attrs, controller) {             var dur = 200;              scope.textstr = '';             scope.textheading = string[0];              (function fn() {                 if (string.length) {                     head.stop().fadeout(0).fadein(dur, function() {                         scope.textstr += string.shift();                         scope.textheading = string[0];                         scope.$apply();                         fn();                     });                 } else {                     scope.textheading = '';                 }             }());         }     } }