I'm using angular 1.2

ng-repeat creates divs that also contain ng-click

ng-click updates $scope when clicked

the change in $scope is reflected in ng-repeat using $apply

It works ... but I get an error when I click and I think I am applying $apply incorrectly

here is my jsfiddle link

function appcontrol ($scope, $log) {
  // declare $scope vars
  $scope.currentlist = [];
  for (var i = 0; i < 10; i++) {
    $scope.currentlist[i] = {'key':i, 'value':i};  
  }
  $scope.extra = 'My Extra';
  $scope.anotherextra = 'Another Extra';
  // click handler
  $scope.handleCellClick = function(cellnumber){
    $log.log(cellnumber + ' clicked');
    // update the $scope property
    $scope.currentlist[cellnumber].value = 'AAA';
    // push out the new change to the dom
    $scope.$apply();    
    // trigger other stuff
  }
  // click handler
  $scope.handleExtraClick = function(arg){
    $log.log('extra clicked  ', arg);
    // update the $scope property
    if (arg=='My Extra') $scope.extra = 'AAA';
    if (arg=='Another Extra') $scope.anotherextra = 'AAA';
    // push out the new change to the dom
    $scope.$apply();    
    // trigger other stuff
  }         
}

and html

 <div ng-controller="appcontrol">
   <div ng-repeat="item in currentlist" id="cell{{item.value}}" ng-model="item.value" class="cell" ng-click="handleCellClick(item.key)">{{item.value}}</div>
   <div id="cell{{extra}}" ng-click="handleExtraClick(extra)">{{extra}}</div>
   <div id="cell{{anotherextra}}" ng-click="handleExtraClick(anotherextra)">{{anotherextra}}</div>
 </div>

I'm using angular 1.2

ng-repeat creates divs that also contain ng-click

ng-click updates $scope when clicked

the change in $scope is reflected in ng-repeat using $apply

It works ... but I get an error when I click and I think I am applying $apply incorrectly

here is my jsfiddle link

function appcontrol ($scope, $log) {
  // declare $scope vars
  $scope.currentlist = [];
  for (var i = 0; i < 10; i++) {
    $scope.currentlist[i] = {'key':i, 'value':i};  
  }
  $scope.extra = 'My Extra';
  $scope.anotherextra = 'Another Extra';
  // click handler
  $scope.handleCellClick = function(cellnumber){
    $log.log(cellnumber + ' clicked');
    // update the $scope property
    $scope.currentlist[cellnumber].value = 'AAA';
    // push out the new change to the dom
    $scope.$apply();    
    // trigger other stuff
  }
  // click handler
  $scope.handleExtraClick = function(arg){
    $log.log('extra clicked  ', arg);
    // update the $scope property
    if (arg=='My Extra') $scope.extra = 'AAA';
    if (arg=='Another Extra') $scope.anotherextra = 'AAA';
    // push out the new change to the dom
    $scope.$apply();    
    // trigger other stuff
  }         
}

and html

 <div ng-controller="appcontrol">
   <div ng-repeat="item in currentlist" id="cell{{item.value}}" ng-model="item.value" class="cell" ng-click="handleCellClick(item.key)">{{item.value}}</div>
   <div id="cell{{extra}}" ng-click="handleExtraClick(extra)">{{extra}}</div>
   <div id="cell{{anotherextra}}" ng-click="handleExtraClick(anotherextra)">{{anotherextra}}</div>
 </div>

• javascript
• angularjs

2 Answers 2

Angular already call $apply for you when you use ng-click. If you take out all the $scope.$apply() in your code, the error won't show up, and it would work exactly the same. Updated fiddle

You don't need $scope.$apply() way you are using it. AngularJS loads the data in $scope automatically. $apply() is used to execute an expression in angular from outside of the angular framework. Also, I would use this function very sparely as it slows your performance.

For example, you would use $apply() for data changed outside of angular like this:

//explicitly auto adjust width and height when user changes size
$scope.$apply( function(){              
    $scope.width = $window.innerWidth;
    $scope.height = $window.innerHeight;                            
}); 

Checkout more here--> https://docs.angularjs/api/ng/type/$rootScope.Scope#$apply