angularjs ng-repeat SELECT ALL

Question

I have two columns of checkboxes using ng-repeat, one called 'Calc.' and the other called 'Calc. Final'.

I have a button which I would like, when clicked, to match the selections of Calc. in Calc. Final.

Function:

function updateCalcFinal() {
    vm.desktop.comparables.comp.forEach(e => {
        e.calcFinal = e.calc;
        console.log([e.calcFinal, e.calc]);
    });
}

HTML:

<button class="btn btn-sm btn-primary pull-right mt5 mb5" 
        ng-disabled="deskCtrl.loading" 
        ng-click="deskCtrl.updateCalcFinal()">
  <i class="glyphicon glyphicon-ok"></i>
  &nbsp;&nbsp;Igualar Calc.
</button>

The above code is binding in the console.log but is not being updated in the View. Any help would be much appreciated.

Answer 1

My experience is that when the console is updated but not the view, there is some asynchronous effect that causing the discrepancy. Like the data is updated but angularjs doesn't know that it's updated.

I would suggest looking up $scope.$apply()

suggested reference: When is it safe to use $scope.$apply()?

Here is a working Plunker that demonstrates the difference and the implementation: https://plnkr.co/edit/vdLJUg2LNIcBz5ng1kwr?p=preview

$scope.withApply = function(){
    $scope.name = 'World';
    console.log('button pressed')
    setTimeout(function(){
      console.log('$scope.name changed to async')
      $scope.name = 'async'
      $scope.$apply()                           <------ $scope.$apply()
    },1000)
  }
  $scope.withOutApply = function(){
    $scope.name = 'World';
    console.log('button pressed')
    setTimeout(function(){
      console.log('$scope.name changed to async')
      $scope.name = 'async'
    },1000)

the apply() function gets called at the end of the async callback, I think you are wrapping your async operation which doesn't work.