My AngularJS directive has a template with two tags - an input and an empty list. I am trying to watch the input value of the first input tag. However, the $watch() method only gets called once during initialization of the directive and any subsequent changes to the input value do not trigger it. What could be causing this issue?
You can find my plunk here.
Below is the code snippet:
.directive('drpdwn', function(){
var ref = new Firebase("https://sagavera.firebaseio.com/countries");
function link(scope, element, attrs){
function watched(){
element[0].firstChild.value = 'bumba'; //this gets called once
return element[0].firstChild.value;
}
scope.$watch(watched, function(val){
console.log("watched", val)
}, true);
}
return {
scope:{
searchString: '='
},
link: link,
templateUrl:'drpdwn.html'
}
})
Edit:
If I include the $interval() function within the link function, everything works as expected. Is this intentional behavior?