AngularJS OrderBy problems - angularjs

Question

So i'm learning angularJS and was messing around with the ng-repeat, and $http service.
I picked a webservice to return some data, and put it into the ng-repeat and that all works fine.
I want to be able to re-organise the table A-Z, Z-A by color name, but I cant get it working. I'm pretty sure it's something to do with the structure of the JSON i'm getting back.
JSFiddle: http://jsfiddle.net/wshekyls/bKGPj/
HTML Code:
<div ng-controller="testCtrl">Sort :
<select ng-model="selectedColumn">
<option value="name">A-Z</option>
<option value="-name">Z-A</option>
</select>
<table>
<tr>
<th>Name</th>
<th>Cloth</th>
<th>Leather</th>
<th>Metal</th>
</tr>
<tr ng-repeat="color in colorData | orderBy:selectedColumn">
<td>{{color.name}}</td>
<td style="background: rgb({{color.cloth.rgb.join()}});">{{color.cloth.rgb}}</td>
<td style="background: rgb({{color.leather.rgb.join()}});">{{color.cloth.rgb}}</td>
<td style="background: rgb({{color.metal.rgb.join()}});">{{color.cloth.rgb}}</td>
</tr>
</table> <pre>{{colorData | json}}</pre>
<!-- !!!!!!!!! -->
</div>
JS:
var app = angular.module('myApp', []);
function testCtrl($scope, $http) {
$http.get('https://api.guildwars2.com/v1/colors.json').success(function (data) {
$scope.colorData = data.colors;
});
$scope.selectedColumn = 'name';
}

Answer 1

Your return data is not an array and orderBy only works with array...
You should push all your data into array on order to work with orderBy if you rearrange your code like this it will work...
$http.get('https://api.guildwars2.com/v1/colors.json').success(function (data) {
$scope.colorData = [];
angular.forEach(data.colors, function(color){
$scope.colorData.push(color);
});
});
here is workin JSFIDDLE...