scope variable changes does not affect the view

Question

I am struggling with an AngularJS problem. I have two HTML blocks in a ng-repeat and wants to show one of them on 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 my HTML elements.

I am calling checkFunction method each time to change my started value in every step.

And my function in controller is this.

$scope.started=true;
$scope.checkFunction=function(){
 $scope.started = !$scope.started;
 console.log($scope.started);
}

$scope.started value changes with every step I can see it in console but ng-if always takes true value.

I tried $scope.$apply() method for forcing view update in $timeout but that didn't help too. Everything works normal expect this part.

Working Demo : https://plnkr.co/edit/lVSnbj?p=preview

• Panos K: use ng-if="!started" on your second condition. also why you wrapping both of them in ng-if (i mean this <div id="left_group_stage" ng-if="started">)
• Shashank Vivek: There is not point in having <div id="left_group_stage" ng-if="started"> and then another ng-If inside the div. Makes no sense. relook into your code and better provide a plunkr
• Suat Karabacak: @PanosK sorry for bad copy paste skills I was trying something. Now I edit question and a demo plnkr.co/edit/lVSnbj?p=preview
• Vikasdeep Singh: Not getting what are you asking? Create a working code snippet
• Shashank Vivek: Its true because, you have assigned same $scope.started variable to all div. So, you get the value which has been assigned in the last iteration

Answer 1

How about

 <div class="col-md-3" style="margin-top: 80px"
 ng-init="checkFunction()">
 <div id="left_group_stage">
 <ul class="list-group" ng-if="($index%2 === 0)">
 <li class="list-group-item">List 1</li>
 <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="($index%2 !== 0)">
 <li class="list-group-item">list 2</li>
 <li class="list-group-item">{{group_leaders[$index]}}</li>
 <li class="list-group-item">{{group_runners[$index-1]}}</li>
 </ul>
 </div>
 </div>

You can achieve the same behavior using odd and even check this plunkr

odd: ng-if="($index%2 !== 0)"

even : ng-if="($index%2 === 0)"

so it occurs alternatively.

• Suat Karabacak: Yes this achieves my problem for this situation but I am curios about why Angular.js doing this behaviour. Is it possible to do it with the way in question ?
• Shashank Vivek: @SuatKarabacak :angularjs is doing the expected behaviour. As I explained in above comments as well that you are binding same variable $scope.started to all the ng-repeat elements. What’s happening is that once 4th iteration is complete the value is set as true, and so all div gets ng-if as true. Try filter limitTo with 3. You’ll get it as false.
• Shashank Vivek: @SuatKarabacak I have suggested you a very clean and least messy approach. You can try other approaches as well but it’ll be a lot messy. I would still recommend not to go down on that unless it’s the only way. Do let me know if you need more explanation. Please mark it as an answer if you got what you were looking for. ;)
• Shashank Vivek: @SuatKarabacak : did my comment help you? Or you want more explanation?