Accessing a nested ng-repeat variable - angularjs

Question

This is what I have so far:
<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === {{ storeSection.category }}">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
Basically, I only want to display the items in main.ingredients that have the same category as the header, but I cannot access {{ storeSection.category }} once I use a new ng-repeat. Any ideas?

Answer 1

<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === storeSection.category">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>

Answer 2

<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === storeSection.category ">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
Don't interpolate storeSection.category, ng-if works with angular-expressions just like the left-hand operandingredient.storeSection is getting evaluated by it

Answer 3

As pointed out in another answers, the cause of the problem is that you're using interpolation in your ngIf directive, which one works with angular-expressions.
Tips:
Use preferably ngIf instead of ngShow(in your first <div>).
I also recommend you to use the native filter instead of this check using ngIf(in ngRepeat) and to use the ngRepeat#special-repeats.
So you can have something like this:
<div ng-repeat-start="storeSection in main.foodBySection" ng-if="main.sortBy === 'storeSection'">
<h4 ng-bind="storeSection.category"></h4>
</div>
<div ng-repeat-end ng-repeat="ingredient in main.ingredients | filter: { storeSection: storeSection.category } | orderBy: 'name'">
<p>
<input type="checkbox" ng-model="ingredient.added" /> {{ ingredient.name }} <span class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>