Angularjs ng-repeat not printing variable

Question

I am running this with flask on localhost:5000. It works if I just open the html file with a browser, but it does not work with flask. I have an array named "arr" with 4 numbers in it located inside my controller. I want to print out each number but ng-repeat will not do so. What's really interesting and key is that ng-repeat will repeat the number of times equal to the number of items in the array so that is good, but it just can't print the variable {{number}} in ng-repeat="number in arr". Here is my code:

<html ng-app='numberApp'>
<head>
  <meta charset="utf-8">
  <title>Cool</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script>
  var numberApp = angular.module('numberApp', []);
  numberApp.controller('numberCtrl', function($scope, $http){
      $scope.arr = [2, 4, 5, 6];
    });
  </script>
</head>
<body ng-controller="numberCtrl">
  <table>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
    <tr ng-repeat="number in arr">
      <td> {{ 'start' }} </td>
      <td> {{ number }} </td>
      <td> {{ 'end' }} </td>
    </tr>
  </table>
</body>
</html>

This is what shows up in the browser:

First   Second  Third
start           end
start           end
start           end
start           end

It will not print out {{ number }}. Thanks a million to anyone who can tell me why this is happening!

Your code works fine in this [plunker](http://plnkr.co/edit/1Yz1LDIBAcIpeI7eR70w?p=preview) — Kirill Slatin, Aug 03 '15 at 01:10
I have been running it through localhost:5000 with flask. I forgot to check if it works with just opening the html file with a browser instead. So this then tells me that it is a flask/jinja problem — Adam, Aug 03 '15 at 01:14
{{ '{{number}}' }} fixed it for anyone reading this. Thanks to robert.corlett's answer here: http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces — Adam, Aug 03 '15 at 01:29

score 7 · Accepted Answer · answered Aug 03 '15 at 03:39

It seems Jinja expressions: "{{}}" conflict with angular expressions : "{{}}". Let try this one:

<html ng-app='numberApp'>
<head>
  <meta charset="utf-8">
  <title>Cool</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script>
  var numberApp = angular.module('numberApp', []);
// solved conflict with {{}} of jinja, now we use [[]] for angular expressions
numberApp.config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
}]);
  numberApp.controller('numberCtrl', function($scope, $http){
      $scope.arr = [2, 4, 5, 6];
    });
  </script>
</head>
<body ng-controller="numberCtrl">
  <table>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
    <tr ng-repeat="number in arr">
      <td> {{ 'start' }} </td>
      <td> [[ number ]] </td>
      <td> {{ 'end' }} </td>
    </tr>
  </table>
</body>
</html>

Awesome yeah this looks better and easier than {{ '{{number}}' }}. Thank you very much — Adam, Aug 03 '15 at 05:33
I need a reputation above 15. I'm only at 11. I plan on voting all those who helped me once I get to 15 though. Vote my question up? Haha it'll help me get there. — Adam, Aug 05 '15 at 00:59

score 2 · Answer 2 · answered Aug 03 '15 at 01:27

Jinja is most likely interpreting angular's template syntax as it's own and replacing {{ number }} with nothing.

I bet if you were to check the page source that jinja serves, the "start" and "end" strings would be part of HTML being served, instead of angular having inserted these values dynamically.

Angularjs ng-repeat not printing variable

2 Answers2