I am attempting to create a counter in AngularJS that will be used for some other purpose once it is working with a variable. However, I am facing an issue where the variable is not updating as expected. Since this will eventually become a more complex component, it is crucial that the variable can be displayed as {{Var}}.
Here is how I have implemented the directive in the HTML:
<div test-directive var="5">-</div>
Below is the JavaScript code for the directive, where I have experimented with both the link and controller functions:
app.directive('testDirective',function(){
return{
template: '<div> -> {{myLocalVar}} <- </div>',
scope:{
specialVar: '=var'
},
link: function($scope,element,attributes){
//console.log($scope.specialVar);
$scope.myLocalVar = $scope.specialVar;
//$scope.myLocalVar +=1 ;
function doThis(){
$scope.myLocalVar +=1 ;
//$scope.$digest();
console.log('in');
if($scope.myLocalVar < 10){
setTimeout(function(){doThis();}, 1000);
}
}
doThis();
//console.log($scope.myLocalVar);
}
};
});
Any assistance would be greatly appreciated. Thank you!