Angular and JSON syntax getting confused with {}

Question

I am new to angular and trying to integrate it within my application. I am attempting to use a simple ng-repeat (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:

person.html file:

<div> {{ myFirstName }} </div>
<div> {{ mySurName }} </div>

person.json file:

{
    "myFirstName"   : "Joe",
    "mySurName" : "Bloggs",
}

I think the problem i am facing, is that Swig uses {{ }} to get data from .JSON files, and Angular uses {{ }} too.

Here is my simple ng-repeat:

<ul ng-controller="MyCtrl">
   <li ng-repeat="country in countries">
       {{country.name}} has population of {{country.population}}
   </li>
</ul>

Here is my simple controller:

require(['app'], function(app) {
'use strict';

   app.controller("MyCtrl", function($scope) {

      $scope.countries = [
          {name: 'France', population: 63.1},
          {name: 'United Kingdom', population: 61.8}
      ];

   });
});

When opening my HTML page, all that is displayed is:

 has population of
 has population of 

Any ideas of how i can get around this?

Thanks

UPDATE

I would like angular to retrieve the data from the .JSON file

UPDATE Folloiw David Beech's recommendation

Application Tree:

- application
     - resources
           - CSS
           - img
           - JS
           - data
                - countries-data.json
     - pages
           - countries.html

In the example solution below my $http.get was

$scope.countries  = [];
  $http.get('/resources/data/countries-data.json', function(data){

Error shown in Firebug: "NetworkError: 404 Not Found - http: // localhost:8000/resources/data/countries-data.json"

Answer 1

To answer part 2 of your question and get angular to retrieve the json file use the $http service. http://docs.angularjs.org/api/ng/service/$http

app.controller("MyCtrl", function($scope, $http) {
  $scope.countries = [];
  $http.get('/path/to/data.json', function(data){
      $scope.countries = data;
  }, function(error) {
     //handle error here
  });
});

And to answer part 1:

I'm not familiar with swig and after a quick google I notice this is available server-side on node or client side and you don't specify how you are using it.

If you are using it server-side I would recommend you check it's documentation about escaping certain bindings to ensure pages are being delivered with the bindings in the html (you can check this by 'view page source' option in chrome).

UPDATE: http://paularmstrong.github.io/swig/docs/api/#SwigOpts I notice here you can set the varControls binding to something other then '{{' and '}}'.

If you are using it client side then I would ask why you need it at all.. angular works best when you give it as close to complete and exclusive control over the DOM as possible. I'm sure anything that is possible in most templating engines is possible in angular with a little more learning and training and there are plenty of resources for that if you just do a little googling.

Hope this helps.