Sorting Table with JSON key with a space - angularjs

Question

I am trying to implement a sort functionality on a table.
I am able to sort table headers with json(no spaces). However, I am unable to sort table headers with JSON key with spaces
How to solve this problem?
Script:
$scope.sortType = 'Age';
$scope.sortReverse = false;
HTML:
<table border="1" class="table table-striped">
<thead>
<tr>
<th>
<a href="#" ng-click="sortType = x[First Name]">First Name
<span ng-show="sortType == x[First Name] && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == x[First Name] && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = x[Last Name;sortReverse = !sortReverse">
Last Name
<span ng-show="sortType == x[Last Name] && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == x[Last Name] && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Age';sortReverse = !sortReverse">
Age
<span ng-show="sortType == 'Age' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Age' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Address';sortReverse = !sortReverse">Address
<span ng-show="sortType == 'Address' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Address' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in result | filter:searchText | orderBy:sortType:sortReverse">
<td>{{x['First Name']}}</td>
<td>{{x['Last Name']}}</td>
<td>{{x.Age}}</td>
<td>{{x.Address}}</td>
</tr>
</tbody>
</table>

Answer 1

You have syntax errors in your code which you should be seeing in your browser console.
Example:
<th>
<a href="#" ng-click="sortType = x[First Name]">First Name
<span ng-show="sortType == x[First Name] && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == x[First Name] && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
It seems like you should be using the string literal 'First Name' and not x[First Name] which is a syntax error and an undefined variable.
Try changing the above to:
<th>
<a href="#" ng-click="sortType = 'First Name'">First Name
<span ng-show="sortType == 'First Name' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'First Name' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
That should help with the syntactical issues which you should be seeing in your browser console right now and may solve the issue altogether.