django code is execude only once in an angular ng-repeat - angularjs

Question

All,
I have some HTML in an Angular "ng-repeat" block which includes calling a Django template tag. However, that tag only gets called once. Here is a contrived example:
my_template.html
<div ng-repeat="item in items" ng-init="items=['a','b','c']">
{% verbatim %}
the item is: {{a}}
{% endverbatim %}
the template tag returns: {% my_template_tag %}
</div>
my_template_tags.py
my_generator = (i for i in ['a','b','c'])
#register.simple_tag
def my_template_tag():
return my_generator.next()
This correctly renders 3 divs but they have the wrong content:
<div...>
the item is: a
the template tag returns: a
</div>
<div...>
the item is: b
the template tag returns: a
</div>
<div...>
the item is: c
the template tag returns: a
</div>
That template tag is only being called once. Does anybody know why?
Thanks.

Answer 1

The Django template is rendering the HTML before Angular does anything. The Django template has no knowledge that you're going to do an iteration on the front end. So, when Django is done processing, the code looks like this:
<div ng-repeat="item in items" ng-init="items=['a','b','c']">
the item is: {{a}}
the template tag returns: a
</div>
If you're iterating with the Django template, you need to actually render all the divs you want to create on the server side. The Django iteration doesn't really mix with the ng-repeat you have on the front-end.