Strange issue with AngularJS template - angularjs

Question

I'm getting a very very strange issue with Angularjs, I'm using a directive where I defined an inline template on page like this:
<script type="text/ng-template" id="breadcrumb.html"> {[ state.current.displayName ]} </script>
However, I'm getting this weird error:
> Error: JSON.parse: expected property name or '}'
> fromJson#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1035
> #http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6926
> transformData/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6901
> forEach#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:302
> transformData#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6900
> transformResponse#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:7570
> qFactory/defer/deferred.promise.then/wrappedCallback#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:10905
> qFactory/ref/<.then/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:10991
> Scope.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:11906
> Scope.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:11734
> Scope.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:12012
> bootstrap/doBootstrap/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1299
> invoke#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:3697
> bootstrap/doBootstrap#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1298
> bootstrap#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1311
> angularInit#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1260
> #http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:20534
> x.Callbacks/c#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> x.Callbacks/p.fireWith#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> .ready#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> q#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
Now, if I actually add something into the template, for example any random character like this:
<script type="text/ng-template" id="breadcrumb.html"> a{[ state.current.displayName ]} </script>
Then the error goes away, everything renders fine.
PS: Note that I changed from {{}} to {[]} to avoid syntax conflict with Twig
Edit:
In respond to the interpolate issue, I already use:
angular.module('myapp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[').endSymbol(']}');
}
);
Shouldn't this be enough. And if that doesn't work, the why does putting a random character 'a' to it helps?
Edit 2:
Plunker added:
Please check this link for working code:
http://plnkr.co/edit/OQiJovrNzOraJdsSXeSY?p=preview
Please check this link for non-working code:
http://plnkr.co/edit/IzGpTdnqmO5MxtldnKec?p=preview

Answer 1

Angular expects {{}} for interpolation.
To avoid conflicts you can use ng-bind:
<script type="text/ng-template" id="breadcrumb.html" ng-bind="state.current.displayName"></script>
But, I've never tried it with a <script> tag though.

Answer 2

This is a confirmed issue of the current version of Angular JS (1.2.x)
I have submitted a ticket here:
https://github.com/angular/angular.js/issues/5756