ng-if conflicting with ng-repeat filter?
<p>I have a table that displays city info and starts a new row after every 3 entries. Before I added the ng-if conditions, I was able to filter each entry by city, country and continent. Now, whatever I enter into the input boxes to filter the table only returns the entire first row. What's going on? (Sorry if it's not that readable.)</p>

<pre><code>&lt;table align="center" ng-show="toggleFlag"&gt;
&lt;tbody ng-if="$index%3==0" ng-repeat="item in pic|filter:pic.capital|filter:pic.country|filter:pic.continent"&gt;
&lt;tr&gt;
&lt;td ng-if="$index&lt;pic.length"&gt;
&lt;img ng-src="{{pic[$index].image}}"&gt;&lt;br&gt;&lt;div&gt;{{pic[$index].capital}} is the capital of {{pic[$index].country}},&lt;br&gt; which is located in       {{pic[$index].continent}}.&lt;/div&gt;
&lt;/td&gt;
&lt;td ng-if="$index&lt;pic.length-1"&gt;
&lt;img ng-src="{{pic[$index+1].image}}"&gt;&lt;br&gt;&lt;div&gt;{{pic[$index+1].capital}} is the capital of {{pic[$index+1].country}}
,&lt;br&gt; which is located in {{pic[$index+1].continent}}.&lt;/div&gt;
 &lt;/td&gt;
&lt;td ng-if="$index&lt;pic.length-2"&gt;
&lt;img ng-src="{{pic[$index+2].image}}"&gt;&lt;br&gt;&lt;div&gt;{{pic[$index+2].capital}} is the capital of {{pic[$index+2].country}},&lt;br&gt; which is located in {{pic[$index+2].continent}}.&lt;/div&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
</code></pre>

<p>Here are the input boxes:</p>

<pre><code>&lt;h1&gt;City Database Search: &lt;input ng-model="pic.capital"&gt;&lt;/h1&gt;
&lt;ul&gt;&lt;li ng-show="pic.capital" id="li" ng-repeat="item in pic|filter:pic.capital|orderBy:'capital' track by item.capital"&gt;&lt;h1&gt;{{item.capital}}&lt;/h1&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;h1&gt;Country Database Search: &lt;input ng-model="pic.country"&gt;&lt;/h1&gt;
&lt;ul&gt;&lt;li ng-show="pic.country" ng-repeat="item in pic|filter:pic.country|orderBy:'country' track by item.country"&gt;
&lt;h1&gt;{{item.country}}&lt;/h1&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;h1&gt;Continent Database Search: &lt;input ng-model = "pic.continent"&gt;&lt;/h1&gt;
&lt;ul&gt;&lt;li ng-show="pic.continent" ng-repeat="item in pic|filter:pic.continent|orderBy:'continent' track by item.continent"&gt;
&lt;h1&gt;{{item.continent}}&lt;/h1&gt;&lt;/li&gt;&lt;/ul&gt;&lt;br&gt;
</code></pre>

<p>JSON file:</p>

<pre><code>[
{
"capital":"Ottawa",
"country":"Canada",
"continent":"North America",
"image":"https://upload.wikimedia.org/wikipedia/commons/2/22/Parliament-   Ottawa.jpg"
},
{
"capital":"Oslo",
"country":"Norway",
"continent":"Europe",
"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Downtown_Oslo_Norway_skyline.png/800px-Downtown_Oslo_Norway_skyline.png"
},
{
"capital":"Auckland",
"country":"New Zealand",
"continent":"Oceania",
"image":"https://upload.wikimedia.org/wikipedia/commons/6/6e/Auckland_City_from_Mt_Victoria%2C_Devonport_-_Flickr_-_111_Emergency_%281%29.jpg"
},
{
"capital":"Buenos Aires",
"country":"Argentina",
"continent":"South America",
"image":     "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Buenos_Aires_Panorama.jpg/800px-Buenos_Aires_Panorama.jpg"
},
{
"capital":"Tokyo",
"country":"Japan",
"continent":"Asia",
"image":"https://upload.wikimedia.org/wikipedia/commons/b/bf/Tokyo_Montage_2015.jpg"
}
]
</code></pre>