Angular ng-repeat in an ng-if wrapped in another ng-repeat - angularjs

Question

Not sure exactly what's going on, but it looks like my expressions are not getting evaluated or expanded.
<div ng-repeat-start="q in questions">
<h3>{{q.text}}</h3>
<p ng-if="q.type == 'checkbox'">
<p ng-repeat-start="a in q.answers">1 {{q.type}}
<input type={{q.type}}>{{a.text}}</input><br/>
</p>
<p ng-repeat-end></p>
</p>
<p ng-if="q.type == 'radio'">
<p ng-repeat-start="a in q.answers">2 {{q.type}}
<input type={{q.type}}>{{a.text}}</input><br/>
</p>
<p ng-repeat-end></p>
</p>
</div>
<p ng-repeat-end></p>
The output shows the code is executing every if, as if they were both true. This produces duplicate checkoboxes/radio buttons.
1 checkbox Voice calling.
1 checkbox Text messaging.
1 checkbox Data access
2 checkbox Voice calling.
2 checkbox Text messaging.
2 checkbox Data access
It should look like this:
1 checkbox Voice calling.
1 checkbox Text messaging.
1 checkbox Data access
2 radio new question 1.
2 radio new question 2.
2 radio new question 3.

Answer 1

Your problem is nested p tag more details
<p>this
<p>will not work</p>
</p>
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
In that case ng-if directive will not evaluate properly. So if you use div or span instead of p then it should works
<div ng-repeat-start="q in questions">
<h3>{{q.text}}</h3>
<span ng-if="q.type == 'checkbox'">
<p ng-repeat-start="a in q.answers">1 {{q.type}}
<input type={{q.type}}>{{a.text}}<br/>
</p>
<p ng-repeat-end></p>
</span>
<span ng-if="q.type == 'radio'">
<p ng-repeat-start="a in q.answers">2 {{q.type}}
<input type={{q.type}}>{{a.text}}<br/>
</p>
<p ng-repeat-end></p>
</span>
</div>
<p ng-repeat-end></p>
see the Demo