AngularJS non-ascii property name support

Question

I don't know how to use non-ascii property name in AngularJS. I could print a value by using a['property_name'] instead of a.property_name, but I couldn't use the same way in 'orderBy'. If I click on 'name', sorting would happen, but if I click on '가격_price', nothing would happen and an error would show up in the console. How could I sort a table which has non-ascii name?

(There are Korean Characters in the code, but I think it makes sense.)

http://jsfiddle.net/k9h32mh9/

<div ng-app>
    <div ng-controller="ListCtrl">
        <table>
            <tr>
                <th><a ng-click="predicate='name'; reverse=false">name</a></th>
                <th><a ng-click="predicate='가격_price'; reverse=false">가격(price)</a></th>
            </tr>
            <tr ng-repeat="item in items | orderBy:predicate:reverse">
                <td>{{item.name}}</td>
                <td>{{item['가격_price']}}</td>
            </tr>
        </table>
    </div>
</div>
<script>
function ListCtrl($scope, $http) {
    $scope.predicate = '-name';
    $scope.items = [{name: "a", 가격_price:"1000"},
                    {name: "b", 가격_price:"2000"},
                    {name: "c", 가격_price:"1500"}];
}
</script>

Answer 1

While this is an issue with Angular, as per https://github.com/angular/angular.js/issues/2174, it can be worked around by specifying your own predicate function on the scope in order to access the property to sort by:

$scope.predicateProperty = 'name';
$scope.predicate = function(a) {
    return a[$scope.predicateProperty];
};

And the HTML can be almost identical, just setting predicateProperty to the property name that you want to sort by (I've also removed references to "reverse" as it slightly complicates the issue)

<table>
    <tr>
        <th><a ng-click="predicateProperty='name';">name</a></th>
        <th><a ng-click="predicateProperty='가격_price';">가격(price)</a></th>
    </tr>
    <tr ng-repeat="item in items | orderBy:predicate">
        <td>{{item.name}}</td>
        <td>{{item['가격_price']}}</td>
    </tr>
</table>

You can see this working at http://jsfiddle.net/k9h32mh9/5/