Using ng-if inside ng-repeat doesn't work - angularjs

Question

I have an array called polls with many objects poll. Each poll has a property moduleState which is initally set to the string "notVoted". The moduleState for an individual poll may later be set to the string "voted". Here is the template for one of my partials:
<div ng-init="loadPage()">
<div ng-repeat="poll in polls">
<div ng-if="poll.moduleState === 'notVoted'">
//Template 1
</div>
<div ng-if="poll.moduleState === 'voted'">
//Template 2
</div>
</div>
</div>
The problem is, both templates are used for each poll in polls. So if there were 3 poll objects in the array polls, the partial would put out:
Template 1
Template 2
Template 1
Template 2
Template 1
Template 2
I suspect this is because of a weird interaction between ng-if and ng-repeat. How can I get it so only one template per poll shows?
Edit: As requested, here is a console.log of a poll object. As you can see, moduleState is in fact set to "notVoted"

Answer 1

Even though this is not the answer but this post represent how should we proceed for troubleshooting this sort of issues.
<div ng-init="loadPage()">
<div ng-repeat="poll in polls">
<span>poll.moduleState: {{poll.moduleState}}</span>
<div ng-if="poll.moduleState === 'notVoted'">
//Template 1
</div>
<div ng-if="poll.moduleState === 'voted'">
//Template 2
</div>
</div>
</div>
note I have introduced test span to check how much time loop iterates and what is the value of that poll object property.
More ever you can also use some chrome extensions that extracts property value from the current runtime ng binding and shows in the developer tool. You can find that tool here. Explore how you can utilize the tool to find out what values are being bind in the dom element and get your issue resolved. :)
Hope this helps you.

Answer 2

Your code is fine ng-if works in ng-repeat:
HTML:
<div>
<div ng-repeat="poll in polls">
<div ng-if="poll.moduleState === 'notVoted'">
<!-- Template 1 -->
Not Voted: {{poll.name}}
</div>
<div ng-if="poll.moduleState === 'voted'">
<!-- Template 2 -->
Voted: {{poll.name}}
</div>
</div>
</div>
</div>
Angular:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.polls =
[
{
"name": "module1",
"moduleState": "notVoted"
},
{
"name": "module2",
"moduleState": "voted"
}
];
});
Here is the fiddle showing ng-if working with ng-repeat: https://jsfiddle.net/AKMorris/nkqkunfr/

Answer 3

I was facing the same problem. honestly still don't know the reason why, but I work it in another way as making it in reverse, for the example above it should be something like :
<div ng-if="poll.moduleState === 'notVoted'">
<div ng-repeat="poll in polls">
//Template 1
</div>
</div>
<div ng-if="poll.moduleState === 'voted'">
<div ng-repeat="poll in polls">
//Template 2
</div>
</div>