angular watchgroup not consistently picking up mod

Question

I have a dynamic orderBy function I am using for a ng-repeat. I had help with this from another post. He created a plunker and it works great. however when I integrated with project it is not working as expected. I created the plunker with the same versions of all refrences as well. here is link to post. link to stackoverflow post

I have narrowed it down to what it is going on. on page load you see the empty array.

here is when i apply the filter.

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

here is after removing the selected filter. notice the array of objects changed the to the correct value. but with a breakpoint in the watchgroup function i realized it was not picking up the change in the model.

here is when i reapply the same filter. the watchgroup picks up the model change and applys it the orderBy array which should be a empty array.

I have triple checked to make sure the javascript refrences are the same versions. But I am not sure how to troubleshoot this since the plunker works perfect?

here is the actual code from my project

    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

You forgot to clear the array in the $watchGroup callback function.

$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)
    } 
  });
});