Angularjs filling a table - angularjs

Question

I am not able to enter a list in a table within the html of the body. This list came using Angularjs, ajax request with django. The incoming list contains other lists within it, which can vary in size every query. Example: [["a","b","c"],["a","b","c"],["a","b","c"]] or [["a","b","c","d","e"],["a","b","c","d","e"],["a","b","c","d","e"]]
File dfp_consulta.js
function ListDropdown($scope, $http) {
$scope.bvmf = {ccvms : [ '1023', '10456', '10472'],
consolidados : [ 't', 'f' ],
origens : [ 'ITR', 'DFP' ],
balancos : [ '1', '2', '3', '4'],
periodos : [ '1-3', '1-6', '1-9', '1-12' ],
anos : [ '1997', '1998', '1999', '2012' ]
$scope.range=[]
$scope.send=function(ccvm, consolidado, origem, balanco, periodo, ano, ano_doc){
$http({
method:'POST',
url:'/sending/',
data:ccvm+consolidado+origem+balanco+periodo+ano+ano_doc,
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
}).success(function(c){
$scope.range=c
})
}
}
File dfp_consulta.html
{% extends "base.html" %}
{% block corpo %}
<div ng-app="" ng-controller="ListDropdown">
<select ng-model="ccvm" ng-options="ccvm as ccvm for ccvm in bvmf.ccvms"></select><br>
<select ng-model="consolidado" ng-disabled="!ccvm" ng-options="consolidado for consolidado in bvmf.consolidados" ></select><br>
<select ng-model="origem" ng-disabled="!consolidado" ng-options="origem for origem in bvmf.origens" ></select><br>
<select ng-model="balanco" ng-disabled="!origem" ng-options="balanco for balanco in bvmf.balancos" ></select><br>
<select ng-model="periodo" ng-disabled="!balanco" ng-options="periodo for periodo in bvmf.periodos" ></select><br>
<select ng-model="ano" ng-disabled="!periodo" ng-options="ano for ano in bvmf.anos" ></select><br>
<select ng-model="ano_doc" ng-disabled="!ano" ng-options="ano_doc for ano_doc in bvmf.anos" ng-change="send(ccvm,consolidado,origem,balanco,periodo,ano,ano_doc)"></select><br>
<table class='table table-hover'>
{% for i in range %}
<tr>
{% for s in i %}
<td>{{ s }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
{% endblock %}
I am getting in $scope.range for example, the following list [["a", "b", "c"] ["a", "b", "c"] ["a", "b "," c "]], however, {% for i in range %} is not using the range array

Answer 1

The problem is that both Django and AngularJS share the same syntax of Jinja2 for variable substitution in templates.
The easiest option would be to tell Django not to use it's syntax in places you need to use angularjs variable substitution - in other words, use verbatim tag:
{% block corpo %}
{% verbatim %}
<div ng-app="" ng-controller="ListDropdown">
<select ng-model="ccvm" ng-options="ccvm as ccvm for ccvm in bvmf.ccvms"></select><br>
<select ng-model="consolidado" ng-disabled="!ccvm" ng-options="consolidado for consolidado in bvmf.consolidados" ></select><br>
<select ng-model="origem" ng-disabled="!consolidado" ng-options="origem for origem in bvmf.origens" ></select><br>
<select ng-model="balanco" ng-disabled="!origem" ng-options="balanco for balanco in bvmf.balancos" ></select><br>
<select ng-model="periodo" ng-disabled="!balanco" ng-options="periodo for periodo in bvmf.periodos" ></select><br>
<select ng-model="ano" ng-disabled="!periodo" ng-options="ano for ano in bvmf.anos" ></select><br>
<select ng-model="ano_doc" ng-disabled="!ano" ng-options="ano_doc for ano_doc in bvmf.anos" ng-change="send(ccvm,consolidado,origem,balanco,periodo,ano,ano_doc)"></select><br>
<table>
<tr ng-model="item2" ng-repeat="item2 in range">
<td ng-repeat="item3 in item2">{{ item3 }}</td>
</tr>
</table>
</div>
{% endverbatim %}
{% endblock %}
The new table structure allows the build with angularjs amounts different of row and column <tr ng-repeat> and <td ng-repeat>
See also:
Integrate AngularJS with Django
Stackoverflow - Django not working with Angularjs