I'm new to Angular and am implementing something that requires a large ng-repeat loop. Of all the things in the loop I'm only showing one however. I show it using ng-if (ng-if over ng-show so as to remove all other elements from the DOM). My question is: if I have considerable amounts of data inside the elements whos ng-if statements don't evaluate to true, for example some images or very big tables, is that data still downloaded by a user accessing the page with the ng-repeat and ng-if statements on? I.e If I had my ng-repeat repeating 10 times and each time generating a div containing a 100,000 row table, even though only one of the tables shown via the use of ng-if, are all of the other tables evaluated and so downloaded by the user? This is in the interest of bandwidth.
I hope that made sense. For illustration purposes here's an example
<div ng-repeat="foo in bars">
<div ng-if="foo.property == 1">
{{ foo.veryBigTable }}
</div>
</div>
You are actually mixing two parts of a web application i.e. your server side code and your client side angular code.
The answer to your question is Yes, i.e. the whole data will be downloaded from server irrespective of your ng-if condition.
Since you will be populating your data in scope element bars somewhere in your code which will contain all data returned from server and server does not know the conditional data you implemented in the HTML. Its up to the HTML code to display the displayable data based on ng-if condition.
So you need to modify your server code to only send that amount of data which is going to be displayed. This is the way you can save your bandwidth.
Hope, you got my point!