I have developed a function that updates a scope variable as shown below:
// controller.js
$scope.variable = 0;
$scope.$watch('variable', function(){
console.log("change from watch");
});
$scope.increment = function(){
$scope.variable++;
console.log($scope.variable)
}
When I associate a key with this function using Mousetrap,
Mousetrap.bind('j', $scope.increment)
the console.log in the browser indicates that the variable is incremented when the key "j" is pressed. However, the $scope.$watch function mentioned above is not triggered and the message "change from watch" is not displayed.
On the other hand, when I add a click handler in the HTML file,
// index.html
<a ng-click="increment()">{{ variable }}</a>
The variable increases, console.log confirms that $scope.variable is incremented, and the $watch function is executed.
Furthermore, {{ variable }} does not update when I use the key binding, but it does update when I click on it.
It seems that there might be a missing synchronization between Mousetrap and AngularJS $scope causing the function to fire out of sync with AngularJS?