How to use dynamic orderBy in ng-repeat

Question

ive read about how to use dynamic ordering using ng-repeat, but I'm stuck. The object I'm working with is as follows:

 {
    "type": "Active",
    "properties": {
        "id": 105935,
        "name": "Museum Hill Estates",
        "show": false,
        "territoryId": 1996
    },
    "metrics": {
        "bld": {
            "type": "Unknown",
            "count": {
                "prod": 78,
                "custom": 90
            }
        },
        "inv": {
            "fut": 9,
            "vdl": 6,
            "mod": 1,
            "fin": 3,
            "uc": 3,
            "total": 22
        },
        "loe": {
            "bld": 11,
            "inv": 20,
            "size": 3,
            "activity": 9,
            "total": 43
        }
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            -105.93069,
            35.65802
        ]
    }
}

By default I need (desc) name, total loe, inventory (fut / vdl / mod / uc / fin / total) I have 3 flags in the btn group that I want to use to change the order. only the first filter currently works.

here is the plunker working plunker

 vm.sortByName = 'properties.name';
    vm.sortByLoeTotal = 'metrics.loe.total';
    vm.sortByInv = ['metrics.inv.fut','metrics.inv.vdl','metrics.inv.mod','metrics.inv.uc','metrics.inv.fin','metrics.inv.total'];

    vm.setSubdivisionSorting = function (filter) {
        if (filter === 'loe' && vm.loeFilter === true) {
            vm.sortByLoeTotal = 'metrics.loe.total';
            vm.loeFilter = false;
        }
        if (filter === 'loe' && vm.loeFilter === false) {
            vm.sortByLoeTotal = '-metrics.loe.total';
            vm.loeFilter = true;
        }
        if (filter === 'inventory' && vm.inventoryFilter === true) {
           vm.sortByInv = ['metrics.inv.fut', 'metrics.inv.vdl', 'metrics.inv.mod', 'metrics.inv.uc', 'metrics.inv.fin', 'metrics.inv.total'];
           vm.inventoryFilter = false;
        }
        if (filter === 'inventory' && vm.inventoryFilter === false) {
           vm.sortByInv = ['-metrics.inv.fut', '-metrics.inv.vdl', '-metrics.inv.mod', '-metrics.inv.uc', '-metrics.inv.fin', '-metrics.inv.total'];
           vm.inventoryFilter = true;
        }
        if (filter === 'subdivision' && vm.subdivisionFilter === true) {
            vm.sortByName = 'properties.name';
            vm.subdivisionFilter = false;
        }
        if (filter === 'subdivision' && vm.subdivisionFilter === false) {
            vm.sortByName = '-properties.name';
            vm.subdivisionFilter = true;
        }
    };

I just found the angular filter module and included it in punker if someone thinks this is the way to go.

Answer 1

plunker. / abit, .

orderBy . , , .

var orderBy = ['name', 'age'];

var data = [{
 name: 'Foo',
 age: 102
}, {
 name: 'Bar',
 age: 99999 // <-- not used in sorting since the name property differs
}];

orderBy, ; .

, $scope.$watch ng-change html-. , .

, .

.