javascript - Two-way data binding does not work with directives in Angular.js -

i try implement directive, has update specific code block angular-notation {{...}}. problem updated code not compiled anymore.

the directive:

.directive('i18n', [function() { 'use strict'; return function(scope, element) {         var bindlabel = '{{labels.' + element.text() + '}}',         //create empty object         obj = {          };         obj[element.text()] = '';         //extend labels         angular.extend(scope.labels, obj);         element.text(bindlabel); }; }]) 

simple html code:

<title i18n>title</title> 

html code after compilation:

<title i18n="">{{labels.title}}</title> 

desired output:

 <title i18n="">this title :)</title> 

the {{labels.title}} implemented in controller.

thank help!

to dynamically compile dom elements use $compile service:

element.html(value);  // compile new dom , link current scope  $compile(element.contents())(scope); 

in case of example this:

.directive('i18n', [ '$compile', function($compile) { 'use strict'; return function(scope, element) {         var bindlabel = '{{labels.' + element.text() + '}}',         //create empty object         obj = {          };         obj[element.text()] = '';         //extend labels         angular.extend(scope.labels, obj);          // fill element's body template          element.html(bindlabel);          // compile new element , link same scope          $compile(element.contents())(scope);     }; }]); 

you can find more information here: http://docs.angularjs.org/api/ng.$compile