Angular Namespace orderBy is not bound when used multiple times on page

Question

I have about four main divs on one page that are able to be sorted (at least they were via jQuery) and I have converted them to NG sort by piping in the orderBy condition and and binding that to an ng-click. It works fine for the first one but when I try the second group it is barking at me that the namespace for orderBy is not bound so I am assuming that changing up the ground that it is sorting by is not enough.

For now I have some date being populated in an ng-repeat:

<li ng-repeat="condition in signConditions" | orderBy:orderByField:reverseSort">

Which is sorted when the user clicks the link here:

<a href="javascript:void(0)" ng-click="orderByField='title'; reverseSort = !reverseSort" class="titleLabel">Documents <span ng-show="orderByField == 'title'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>

And in my controller I have a simple scope binding here:

$scope.orderByField = 'conditionId';
    $scope.reverseSort = false;

So this works until I try to do it again which I need to do at least four times for four individual groups on the page.

So each new li ng-repeat would be: condition in blahConditions condition in blipConditions' etc...

So my question is how to I bind each orderBy to it's particular group?

Any advice is appreciated.

Answer 1

signConditions" | orderBy:

should be

signConditions | orderBy:

Otherwise you would be starting a new attribute with the namespace orderBy.