title: Keep checkbox checked after page refresh AngularJS
body: <p>I'm quite new to AngularJS and had to takeover somebody else's project at work which has little to no documentation.</p>
  
  <p>I have 2 kinds of check-boxes in my application, one is a "Select All" checkbox and another is a device selection checkbox. As the name suggests, the select all will select all the devices listed below it and if I uncheck the "select all" checkbox, I can check the devices individually to see them.</p>
  
  <p>Here is the code of the Select all checkbox - </p>
  
  <pre><code>&lt;input type="checkbox" data-ng-model='devCtrl.uiChoices.selectAll' value='true' data-ng-change="devCtrl.selectAll()"/&gt;&lt;h4&gt;Select / Deselect All&lt;/h4&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>_this.uiChoices.selectAll = true;
  </code></pre>
  
  <p>I can understand from above that by default, select all is checked and I can see all the devices below it checked too.</p>
  
  <p>Moving onto the device check-box - </p>
  
  <pre><code>&lt;input type="checkbox" data-ng-model='device.draw' data-ng-change="device = devCtrl.adjustVisibility(device)" /&gt;
  </code></pre>
  
  <p>Controller - </p>
  
  <pre><code>_this.adjustVisibility = function(draw) {
          draw.marker.setVisible(draw.plot);  
          return draw;
      }
  </code></pre>
  
  <p>Basically, whenvever the device is selected, it will appear on a google map. If it is unchecked, it won't appear on the map.</p>
  
  <p>My question is, after I uncheck the "Select all" checkbox and then select only 2 devices in the list below and then do a page refresh, I want the select all to be disabled and show only those 2 devices to be checked and displayed on the map.</p>
  
  <p>The list of devices is being pulled from a MySQL database and is updated dynamically.</p>
  
  <p>Any help is appreciated.</p>