angularjs - Issues with bindings inside nested directives -

a little background information understand problem: we're using angularjs , we've run problem regarding how handle translating of our sentences foreign languages. our current setup looks this:

js-directive:

rohan.directive('translate', ['$filter', function ($filter) {     var translateelement = function(element, data, lang){         var results = $filter('i')(element.html(), data, lang);          element.html(results.text);         if (results.tooltip) element.attr('data-tooltip', results.tooltip);     };      return {         restrict: 'a',         link: function (scope, element, attrs) {                 translateelement(element, attrs.translate, scope.currentlanguage);             }         }     } }]); 

js-filter:

rohan.filter('i', [function () {     return  function (key, data) {         key = $.trim(key);          var string = "..." + key + "...";          try {             string = langfile[currentlanguage][key].value;         } catch (e) {             console.warn("translation not found: " + json.stringify(key));         }          return {"text": string}; }; 

this lookup in array correct translation. problem we're facing when data-translate tag nested inside other directives so:

js-problem directive

rohan.directive('easydialog', function () {     return {         restrict: 'e',     transclude: true,         scope: {             text: '@',             showdialog: '=',             useablebuttons: '=',             ondialogclicked: '='},         replace: true,         template:                 '<div>' +                 '<easymodal data-show="showdialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' +                     '<button data-ng-repeat="useablebutton in useablebuttons" data-ng-click="closewindow(); ondialogclicked(\'{{useablebutton}}\')" data-translate>{{useablebutton}}</button>' +                 '</easymodal>' +             '</div>'     }; }); 

output:

<button>incorrect_input</button> 

instead of

<button>your input incorrect</button> //or whatever language selected 

so results in angular resolving data-translate tag first, @ exact moment {{useablebutton}} still {{useablebutton}} , not value inserting @ time.

this resolved using filter rid of forces different workarounds.

so i'd see is:

1. start processing easydialog directive.
2. change {{useablebutton}} whatever inside it.
3. then start data-translate step on whatever inside {{useablebutton}}.

i think can adding watch on useablebutton, check undefined value , when set compile button , add element.

rohan.directive('easydialog', function () {     return {         restrict: 'e',     transclude: true,         scope: {             text: '@',             showdialog: '=',             useablebuttons: '=',             ondialogclicked: '='},         replace: true,         template:                 '<div>' +                 '<easymodal data-show="showdialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' +                 '</easymodal>' +             '</div>'         link: function(scope,element,attrs) {             scope.$watch('useablebutton',function() {                  if (scope.useablebutton) {                       var button = $compile('<button data-ng-repeat="useablebutton in useablebuttons" data-ng-click="closewindow(); ondialogclicked(\'{{useablebutton}}\')" data-translate>{{useablebutton}}</button>')(scope);                       element.find('easymodal').append(button);                  }             }         }     }; });