title: Disable remaining checkboxes when n checkboxes have been checked with AngularJS
body: <p>I'm just starting to learn AngularJS, so bear with me.</p>
  
  <p>I have an app with a list that's bound to an array of objects (D&amp;D spells).  That list displays all the contents of the objects, by binding to the various values of the object.  They filter on the value of a search textbox (<code>query</code>) and are sorted by two properties of the spell objects (level and name).  That all works fine.</p>
  
  <pre><code>&lt;div ng-repeat="(spellKey, spellValue) in spells | groupBy:'level'"&gt;
      &lt;a id="level-{{spellKey}}" class="anchor"&gt;&lt;/a&gt;
      &lt;div ng-repeat="spell in spellValue | filterEach:query | orderBy:['level','name']"&gt;
          &lt;a id="spell-{{spell.name | replaceSpaces}}" class="anchor"&gt;&lt;/a&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a second list that I put in my navbar that's bound to the same array.  It displays just the names and a checkbox next to each name; the checkbox determines whether or not to list each object in the first list (by setting <code>spell.prepared</code> to <code>true</code> or <code>false</code>).  This also works fine.</p>
  
  <pre><code>&lt;div class="navbar-header"&gt;
      &lt;form class="form-inline navbar-left col-xs-10" role="search"&gt;
          ...
      &lt;/form&gt;
      &lt;div class="col-xs-2"&gt;
          &lt;!-- button that displays list of spell links and checkboxes --&gt;
          &lt;button type="button" id="btn-toggle-navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spell-nav"&gt;
              ...
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="spell-nav"&gt;
          &lt;div class="checkbox" style="padding-bottom: 4px;"&gt;
              &lt;label&gt;
                  &lt;input type="checkbox" id="cbHideNonPrepared" ng-model="hideNonPrepared" /&gt;
                  Hide non-prepared
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div ng-repeat="(linkKey, linkValue) in spells | groupBy:'level'"&gt;
              ...
              &lt;ul style="list-style-type: none"&gt;
                  &lt;li ng-repeat="spellLink in linkValue" class="checkbox"&gt;
                      &lt;label&gt;
                          &lt;input type="checkbox" ng-model="spellLink.prepared" ng-class="{true: 'invis'}[spellLink.alwaysPrepared || spellLink.level == 0]" /&gt;
                          &lt;a href="#spell-{{spellLink.name | replaceSpaces}}" ng-click="onSpellLinkClick($event)"&gt;{{spellLink.name}}&lt;/a&gt;
                      &lt;/label&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  ...
  
  &lt;!-- previous code block with added 'ng-hide' --&gt;
  &lt;div ng-repeat="(spellKey, spellValue) in spells | groupBy:'level'"&gt;
      &lt;a id="level-{{spellKey}}" class="anchor"&gt;&lt;/a&gt;
      &lt;div ng-repeat="spell in spellValue | filterEach:query | orderBy:['level','name']"
           ng-hide="hideNonPrepared &amp;&amp; !spell.prepared"&gt;
          &lt;a id="spell-{{spell.name | replaceSpaces}}" class="anchor"&gt;&lt;/a&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Last, I want to limit the number of checked checkboxes allowed to some value assigned in <code>$scope</code> (happens to be 9, but can be in arbitrary integer).  I also want to exclude any values where <code>spell.alwaysPrepared == true</code>, but I assume that's just a <code>filter</code> I can add later.</p>
  
  <p>This is where I'm unsure how to continue.  I thought maybe I should set <code>ng-check</code>, but I wasn't sure to what.</p>