Using Express Handlebars and Angular JS

Your first solution is possible, AngularJS allow to change the start/end symbols of text interpolation like this:

appModule.config(function($interpolateProvider) {  $interpolateProvider.startSymbol('{[{');  $interpolateProvider.endSymbol('}]}');});

Then you could use it in your template:

<div>{[{message}]}</div>

Also see: $interpolateProvider documentation

Hope this helps.

You can always use the ng-bind syntax instead:

<p ng-bind="user.profile.description"></p>
This is identical to
<p>{{user.profile.description}}</p>

From the Angular docs for ngBind:

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

In order to maintain the AngularJS Style, your second solution is better, Create a helper in Express Handlebars.

References to the Handlebars Web Site: http://handlebarsjs.com/block_helpers.html, you can register a helper raw-helper

Handlebars.registerHelper('raw-helper', function(options) {    return options.fn();});

and use it in your hbs template by putting it in a quadruple-stash {{{{

{{{{raw-helper}}}}<div class="container" ng-controller="AppCtrl">    Total Members: {{members.length}}</div>{{{{/raw-helper}}}}