I'm not getting how to over come the following situation, I have a directive with two scope passed from parent as "=" denoting the model binding say attr1 and attr2 are those values.
Inside directive I have used both in the interpolation {{attr1}} and {{attr2}}, Also I have used it inside input type text and email as models.
When I change the value of attr1 from textbox the value gets reflected in the interpolation {{attr1}}, but the change in attr2 textbox is not reflected in the interpolation {{attr2}} , although it gets binded when an valid email id is entered, but i need to show the email when its being typed.
Is there any work around for this ?
How can I do it ?
The fiddle is here.
app.directive("myDirective", function(){
return {
restrict: "EA",
//replace:true,
//transclude:true,
scope: {
attr1: "=",
attr2: "="
},
template: [
"<div>attr1 : {{attr1}}</div>",
"<div>attr2 : {{attr2}}</div>",
"attr1 : <input type='text' ng-model='attr1' /><br/>",
"attr2 : <input type='email' ng-model='attr2' /><br/>",
].join(""),
};
Thanks,
Vinod Louis