title: How can you iterate through ng-models within an ng-repeat in an angular controller?
body: <p>I am pretty new to web dev and trying out angular so there may be many mistakes..
  Basically I have a ng-repeat within an ng-repeat and I need to set a model variable within the child repeat onclick of a checkbox in parent repeat. 
  I don't know how to access the models in the child from the parent. I have tried by giving an [$index] but it does not work.</p>
  
  <p>Here is my HTML. I have a parent checkbox which should change the clicked boolean variable of child checkboxes onclick.</p>
  
  <pre><code>&lt;li ng-repeat="set in wordlistSets" ng-controller="setController"&gt;
  
  &lt;div class="parentSelector"&gt;
  &lt;span class="selectorLeft"&gt;
      &lt;p&gt; blah &lt;/p&gt;
  &lt;/span&gt;
  
  &lt;span class="selectorRight"&gt;
      &lt;input type="checkbox" name="sets" ng-click="selectAll()"&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div  ng-repeat="wordlist in set.content"  ng-click="checked[parent.$index][$index] = !checked[parent.$index][$index]"&gt;
  &lt;span class="selectorLeft"&gt;
      &lt;p&gt;more blah&lt;/p&gt;&lt;br&gt;
      &lt;p&gt;extra blah&lt;/p&gt;
  &lt;/span&gt;
  
  &lt;span class="selectorRight"&gt;
      &lt;input type="checkbox" name="wordLists" ng-click="checked[parent.$index][$index] = !checked[parent.$index][$index]" ng-model="checked[parent.$index][$index]"&gt;
  
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></li></p>
  
  <p>The "SelectAll()" function should iterate through wordlists and toggle the checked variable accordingly. I cant use angulars ng-checked because I need it to toggle and not have the same state as the parent checkbox allways since it can also be set by clciking on the div itself.</p>
  
  <p>Here is the controller. </p>
  
  <pre><code>myApp.controller("setController", function MyController($scope) {
  $scope.parentChecked = false;
  
  $scope.selectAll = function() {
      for (var i = 0; i &lt; $scope.set.content; i++) {
          if ($scope.parentChecked) {
              $scope.checked[$scope.index][i] = true;
          } else {
              $scope.checked[$scope.index][i] = false;
          }
      }
  }
  </code></pre>
  
  <p>Here is a picture for reference. Clicking on either the pink selector or the black parent-selector should tick the checkbox.
  <a href="http://i.stack.imgur.com/hYr07.png" rel="nofollow">Picture of page setup</a></p>
  
  <p>Thanks in advance for any help! :D</p>