Within my controller, I have set a default value for a variable called "data". In my original project, I am using CouchCorner to retrieve data from a CouchDB and update the value of this variable.
Inside a directive, I am watching the variable data and updating the corresponding element. However, I encountered an issue where I received the error "$digest already in progress", causing the directive not to update correctly. Despite researching extensively on the $digest problem, I could not find a suitable solution that addressed my specific issue.
I have created a jsFiddle example, which uses $timeout instead of making an actual CouchDB request: http://jsfiddle.net/cwesM/4/
var App = angular.module('myApp', []);
function Ctrl($scope, $timeout) {
$scope.data="Initial";
$timeout(function(){
$scope.data="Updated"}, 1)
}
App.directive('chart', function(){
return{
restrict: 'E',
link: function(scope, elem, attrs){
scope.$watch(attrs.ngModel, function(v){
alert(v)
elem.html("Data="+v);
});
}
};
});
The script changes the initial value of "data" to "Updated" after 1ms. However, the directive does not get updated even though the $watch function is being executed. Interestingly, removing the alert() function causes everything to work as expected.
How can I prevent the $digest collision from occurring?