I'm currently facing an issue with AngularJS. I have two HTML blocks within an ng-repeat and I need to display one of them at each step.
<div class="col-md-3" style="margin-top:80px" ng-init="checkFunction()">
<div id="left_group_stage">
<ul class="list-group" ng-if="started">
<li class="list-group-item"> {{group_leaders[$index]}}</li>
<li class="list-group-item"> {{group_runners[$index+1]}}</li>
</ul>
<ul class="list-group" ng-if="!started">
<li class="list-group-item"> {{group_leaders[$index]}}</li>
<li class="list-group-item"> {{group_runners[$index-1]}}</li>
</ul>
</div>
</div>
These are the elements in my HTML code.
For every step, I invoke the checkFunction method to update the value of 'started'.
Here's the function in my controller:
$scope.started=true;
$scope.checkFunction=function(){
$scope.started = !$scope.started;
console.log($scope.started);
}
Although the value of $scope.started changes with each step as shown in the console, the ng-if condition always takes a true value.
I attempted using the $scope.$apply() method along with $timeout to force a view update, but unfortunately, it didn't resolve the issue. Everything seems to be working fine except for this specific part.
Here is a demo of the functioning code: https://plnkr.co/edit/lVSnbj?p=preview