angularjs - How to write a directive to change isolate scope value of another directive -

i want extend directive's functionality. here template:

  <input type="text" color="ctrl.color" color-changer="" /> 

and color directive is:

app.directive("color", [function() {   return {     scope: {       color: "="     },     link: function(scope, ielement, iattrs) {       scope.$watch("color", function(){         ielement.css("background-color", scope.color);       });     }   }; }]); 

i want write directive (named color-changer) change color value of other directive when focus on input. how can write directive.

ps: don't want recompile of element. works slow.

ps: want change value bound color attribute trigger $watch

soemthing should work:

myapp.directive("colorchanger", [function() {   return {     scope: {       colorchanger: "="     },     template: '<input type="text" ng-model="colorchanger">'   }; }]); 

see here: http://jsfiddle.net/hb7lu/16774/