AngularJS templates can't use JSON that contains hyphen

Question

AngularJS templates can't use JSON that contains hyphen in the key.

e.g.

My Json looks like

{
   ...
   link: {
       xx-test:{
            href: '/test/xx'
         }
}

Now, in my angularjs template if I refer the href it is not working

<a ng-href="/app/edit?item={{item.link.xx-test.href}}"></a>

It is unable to resolve the value href is rendered as /app/edit?item=

It tried

<a ng-href="/app/edit?item={{'item.link.xx-test.href'}}"></a>
<a ng-href="/app/edit?item={{item.link.xx\-test.href}}"></a>
<a ng-href="/app/edit?item={{item.['link.xx-test'].href}}"></a>

Answer 1

The object key needs to be quoted with:

$scope.bar = {'xx-test':'foo'};

Bracket notation should be used in the angular expression.

<p>{{bar['xx-test']}}</p>

You can optionally escape the hyphen \- in the angular expression.