title: angular ng-click inside ng-repeat to update $scope and then use $apply to update dom
body: <p>I'm using angular 1.2</p>
  
  <p>ng-repeat creates divs that also contain ng-click</p>
  
  <p>ng-click updates $scope when clicked</p>
  
  <p>the change in $scope is reflected in ng-repeat using $apply</p>
  
  <p>It works ... but I get an error when I click and I think I am applying $apply incorrectly</p>
  
  <p>here is my <a href="http://jsfiddle.net/PrimeLens/Pa242/" rel="nofollow">jsfiddle link</a></p>
  
  <pre><code>function appcontrol ($scope, $log) {
    // declare $scope vars
    $scope.currentlist = [];
    for (var i = 0; i &lt; 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
    }         
  }
  </code></pre>
  
  <p>and html</p>
  
  <pre><code> &lt;div ng-controller="appcontrol"&gt;
     &lt;div ng-repeat="item in currentlist" id="cell{{item.value}}" ng-model="item.value" class="cell" ng-click="handleCellClick(item.key)"&gt;{{item.value}}&lt;/div&gt;
     &lt;div id="cell{{extra}}" ng-click="handleExtraClick(extra)"&gt;{{extra}}&lt;/div&gt;
     &lt;div id="cell{{anotherextra}}" ng-click="handleExtraClick(anotherextra)"&gt;{{anotherextra}}&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>