Using Jekyll and AngularJS together

I really want to use Google AngularJS rendering inside Jekyll static generator.

The problem is that both Jekyll and AngularJS both use curly braces in their syntax, thus causing a failure for AngularJS because Jekyll will always take precedence.

Jekyll example of calling a pre-defined URL from the config.yml…

<p>This is our home page: {{ site.url }}</p>

AngularJS inside .html static file…

<div ng-controller="appController">
    My favourite super hero is: {{ name }}
</div>

To fix this implement the $interpolateProvider

var myApp = angular.module('myApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

function appController($scope) {
  $scope.name = 'Robin Hood';
}

<div ng-controller="appController">
    My favourite super hero is: [[ name ]]
</div>