title: AngularJS update model on click of element and also toggle CSS class
body: <p>New to Angular and a bit confused.  I have a list item that needs to display a tick or a cross depending on an initial value from its controller.</p>
  
  <p>When a user clicks the list item I want to change the value to its current opposite and then update the CSS class to reflect this in the DOM.</p>
  
  <p>Currently I have the following controller:</p>
  
  <pre><code>app.controller('SetupSettingsCtrl', ['$scope', '$rootScope', '$location', function ($scope, $rootScope, $location) {
      console.log('setup controller loaded');
  
      $scope.data ={
          about: {
              uie: '439213949123I034',
              appVersion: '3.23453'
          },
          lab: {
              sleep: false,
              move: true
          },
          stats: {
              optOut: true
          }
      };
  
      $scope.chkItem = function($event, prop){
          console.log(prop);
      };
  
  }]);
  </code></pre>
  
  <p>And the following template partial:</p>
  
  <pre><code>&lt;div class="pure-u-1"&gt;
      &lt;h1 class="h2 text-center"&gt;About&lt;/h1&gt;
      &lt;p class="text-center"&gt;Phone UIE: &lt;span class="text-valid"&gt;{{uie}}&lt;/span&gt;&lt;/p&gt;
      &lt;p class="text-center"&gt;App version: &lt;span class="text-valid"&gt;{{appV}}&lt;/span&gt;&lt;/p&gt;
      &lt;p class="text-center"&gt;&lt;a href="#" class="pure-button pure-button-primary"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt; Manual Update&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="pure-u-1"&gt;
      &lt;h2 class="text-center"&gt;LAB functions&lt;/h2&gt;
      &lt;section class="view-content"&gt;
          &lt;ul class="center-block list-bare list-icon-box-chk"&gt;
              &lt;li class="pointer" ng-class="{'un-chk': !sleep}" ng-model="sleep" ng-click="chkItem($event)"&gt;Sleep with phone on bed&lt;/li&gt;
              &lt;li class="pointer" ng-class="{'un-chk': !move}" ng-model="move" ng-click="chkItem($event)"&gt;Movement checker&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;div class="pure-u-1"&gt;
      &lt;h2 class="text-center"&gt;Anonymous Statistics&lt;/h2&gt;
      &lt;section class="view-content"&gt;
          &lt;ul class="center-block list-bare list-icon-box-chk"&gt;
              &lt;li class="pointer" ng-class="{'un-chk': !optOut}" ng-model="optOut" ng-click="chkItem($event)"&gt;I do not want anonymous statistics to be geathered for Health research, and healthcare improvement&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I do not now how to pass the model reference to update the $scope value to trigger the change?  When I pass the model property reference I get the value.</p>
  
  <p>I need to call the controller method to pass the model value to the server also.</p>