Angular watchgroup does not consistently select model changes

Question

I have a dynamic orderBy function that I use for ng-repeat. I helped with this from another post. He created a plunker, and it works great. however, when I integrate with the project, it does not work as expected. I created a plunker with the same versions of all references. here is the link to the post. stack overflow

I narrowed it down to what happens. when you load the page, you see an empty array.

here when i apply the filter.

the selected filter is applied to the array. however, no changes are applied to ng-repeat.

. , . watchgroup , .

, . orderBy, .

triple, , javascript refrences - . , , plunker ?

    mapSidebarCtrl.orderBy = [];

    mapSidebarCtrl.orderOptions = [{
        name: 'Subdivision',
        value: false,
        fields: ['properties.name']
    }, {
        name: 'Total LOE',
        value: false,
        fields: ['metrics.loe.total']
    }, {
        name: 'Inventory',
        value: false,
        fields: ['metrics.inv.fut', 'metrics.inv.vdl', 'metrics.inv.mod', 'metrics.inv.uc', 'metrics.inv.fin', 'metrics.inv.total']
    }];

    $scope.$watchGroup(['mapSidebarCtrl.orderOptions[0].value', 'mapSidebarCtrl.orderOptions[1].value', 'mapSidebarCtrl.orderOptions[2].value'], function () {
        angular.forEach(mapSidebarCtrl.orderOptions, function (x) {
            if (x.value) {
                [].push.apply(mapSidebarCtrl.orderBy, x.fields);
            }
        });
    });

    SelectedTerritoryService.subscribeSelectedTerritorySubdivisions($scope, function selectedTerritorySubdivisions(event, args) {
        mapSidebarCtrl.territorySubdivisions = args
    });

HTML

    <div class="row">
    <div class="col-xs-12">
        <div class="panel-body p-xxs">
            <div class="row">
                <div class="col-xs-12">
                    <div class="btn-group">
                        <label class="btn btn-default btn-xs" ng-repeat="option in mapSidebarCtrl.orderOptions" ng-class="{ active: option.value }" ng-click="option.value = !option.value">
                            <i class="fa" ng-class="{ 'fa-sort-alpha-desc': option.value,  'fa-sort-alpha-asc': !option.value }"></i> {{ option.name }}
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel-body p-xs m-t-sm overflow" ng-style="resizeWithOffset(300)" resize>
    <div class="panel-body p-xxs"
         ng-repeat="subdivision in mapSidebarCtrl.territorySubdivisions | orderBy: mapSidebarCtrl.orderBy">
        <a ng-click="mapSidebarCtrl.selectSubdivision(subdivision.properties.id);">
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-right text-right">
                        <img src="https://placeimg.com/75/75/any">
                    </div>
                    <h5 class="m-b-xs"><span>{{subdivision.properties.name}}</span></h5>
                    <div class="m-b-xs"><span>{{subdivision.properties.status}}</span></div>
                    <div class="badges"> <i class="fa fa-star text-warning"></i> <i class="fa fa-star text-warning"></i> <i class="fa fa-star text-warning"></i> </div>
                </div>
            </div>
        </a>
    </div>
    <pre><code>{{ mapSidebarCtrl.orderOptions | json }}</code></pre>
    <pre><code>{{ mapSidebarCtrl.orderBy | json }}</code></pre>
</div>

Answer 1

$watchGroup.

$scope.$watchGroup(['vm.orderOptions[0].value', 'vm.orderOptions[1].value', 'vm.orderOptions[2].value'], function() {

  vm.orderBy = []; // <=- clear/reset the array

  angular.forEach(vm.orderOptions, function(x) {
    if (x.value) {
      [].push.apply(vm.orderBy, x.fields)
    } 
  });
});