title: Angular and JSON syntax getting confused with {}
body: <p>I am new to angular and trying to integrate it within my application. I am attempting to use a simple <strong><code>ng-repeat</code></strong> (which works perfectly in an example project i setup). However, in the current project, i am using the Swig templating language, which fetches data from a .JSON file using {{ }} e.g:</p>
  
  <p><strong>person.html file:</strong></p>
  
  <pre><code>&lt;div&gt; {{ myFirstName }} &lt;/div&gt;
  &lt;div&gt; {{ mySurName }} &lt;/div&gt;
  </code></pre>
  
  <p><strong>person.json file:</strong></p>
  
  <pre><code>{
      "myFirstName"   : "Joe",
      "mySurName" : "Bloggs",
  }
  </code></pre>
  
  <p>I think the problem i am facing, is that Swig uses {{ }} to get data from .JSON files, and Angular uses {{ }} too.</p>
  
  <p>Here is my simple ng-repeat:</p>
  
  <pre><code>&lt;ul ng-controller="MyCtrl"&gt;
     &lt;li ng-repeat="country in countries"&gt;
         {{country.name}} has population of {{country.population}}
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is my simple controller:</p>
  
  <pre><code>require(['app'], function(app) {
  'use strict';
  
     app.controller("MyCtrl", function($scope) {
  
        $scope.countries = [
            {name: 'France', population: 63.1},
            {name: 'United Kingdom', population: 61.8}
        ];
  
     });
  });
  </code></pre>
  
  <p>When opening my HTML page, all that is displayed is:</p>
  
  <pre><code> has population of
   has population of 
  </code></pre>
  
  <p>Any ideas of how i can get around this?</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I would like angular to retrieve the data from the .JSON file</p>
  
  <p><strong>UPDATE Folloiw David Beech's recommendation</strong></p>
  
  <p>Application Tree:</p>
  
  <pre><code>- application
       - resources
             - CSS
             - img
             - JS
             - data
                  - countries-data.json
       - pages
             - countries.html
  </code></pre>
  
  <p>In the example solution below my $http.get was</p>
  
  <pre><code>$scope.countries  = [];
    $http.get('/resources/data/countries-data.json', function(data){
  </code></pre>
  
  <p>Error shown in Firebug: "NetworkError: 404 Not Found - http: // localhost:8000/resources/data/countries-data.json"</p>