title: Angular "master" check-all checkbox which sets checked status of all other checkboxes
body: <p>I would like to do this:</p>
  
  <pre><code>       [ ]  all toppings
         -----------------
         [ ] mushrooms
         [ ] peppers
         [ ] extra cheese
         [ ] artichokes
  </code></pre>
  
  <p>When the user checks or unchecks [  ] all toppings, the individual toppings are set either all checked or all unchecked.</p>
  
  <p>The individual checkboxes are working properly. But when the controller iterates the toppings list in the <code>setAll()</code> method, setting the selected state of each, the UI does not show the change.   </p>
  
  <pre><code>$scope.items = [{id: 100, name: "mushrooms", price: 1.00}, ....]
  
  &lt;div&gt;
      &lt;p&gt;&lt;input type="checkbox" id="allToppings" 
                data-ng-click="setAll($event)"&gt; all
              &lt;/p&gt;
              &lt;hr/&gt;
              &lt;p data-ng-repeat="item in items"&gt;
                &lt;input type="checkbox" data-ng-model="item.selected" 
                    data-ng-click="item.selected=!item.selected"&gt;  {{item.name}}
              &lt;/p&gt;
     &lt;/div&gt;
  
  
  
   $scope.setAll = function (e) {    
         for (item in items) {
           item.selected = (e.target.checked);
        }                       
   }
  </code></pre>
  
  <p>The <code>setAll()</code> method is invoked, and each item's selected property is set correctly.  What is the proper way to have the UI show the changes?  Does toppings array need to be <code>watched</code>?</p>