Within my controller, I am setting a variable to true using the ng-click directive.
In my custom directive, there is a need to evaluate something when this variable is true. Once evaluated, the directive then sets the variable to false.
The issue I am facing is that I cannot get the $watch function to trigger from the ng-click event.
I have provided a sample fiddle demonstrating the problem. Upon loading the page, the $watch logs true. When the directive is clicked to change it to false, the $watch correctly logs false. However, subsequent clicks do not cause the $watch to fire. Why might this be happening?
http://jsfiddle.net/zcouyvwc/2/
var app = angular.module('myApp', []);
function MyCtrl($scope,$timeout) {
$scope.boolean = true;
$scope.setToTrue = function() {
$timeout(function(){$scope.boolean = true;});
};
}
app.directive("someDirective",['$timeout',function($timeout) {
return {
restrict:"A",
scope:true,
link: function(scope, element, attrs) {
scope.$watch("boolean", function() {
console.log(scope.boolean);
});
element.bind('click',function(){
$timeout(function(){
scope.boolean = false;
});
});
}
}
}]);