title: AngularJS how to get boolean value
body: <p>I'm trying to find out if one or both of the 2 colour checkboxes is selected, and depending on which one/pair is selected, objects of that colour will be outputted on the form. So if a user checked the "purple" check box then there will be a bunch of purple objects outputted to the form. If "purple" and "yellow" are both checked both purple and yellow objects will be outputted onto the screen. I've been trying to check if the checkbox is "true" to see if it selected but there is something wrong with my logic. <a href="http://codepen.io/MarkBond/pen/pJmrxV?editors=101" rel="nofollow">http://codepen.io/MarkBond/pen/pJmrxV?editors=101</a> Thanks in advance</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html ng-app="formApp"&gt;
  
  &lt;head&gt;
      &lt;!-- CSS --&gt;
      &lt;!-- load up bootstrap and add some spacing --&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
     &lt;style&gt;
          body         { padding-top:50px; }
          form         { margin-bottom:50px; }
     &lt;/style&gt;
  
     &lt;!-- JS --&gt;
     &lt;!-- load up angular and our custom script --&gt;
         &lt;script src="http://code.angularjs.org/1.3.14/angular.js"&gt;&lt;/script&gt;
         &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
      &lt;!-- apply our angular app and controller --&gt;
  
  &lt;body ng-controller="FormController as formCtrl"&gt;
      &lt;div class="col-xs-12 col-sm-10 col-sm-offset-1"&gt;
  
           &lt;h2&gt;Angular Checkboxes&lt;/h2&gt;
  
           &lt;form&gt;
               &lt;div class="checkbox"&gt;
                   &lt;label&gt;
                       &lt;input type="checkbox" name="displayOption" ng-model="formData.displayOption.purple" ng-click="yourFunction()" /&gt;purple
                   &lt;/label&gt;
               &lt;/div&gt;
               &lt;div class="checkbox"&gt;
                   &lt;label&gt;
                       &lt;input type="checkbox" name="displayOption" ng-model="formData.displayOption.yellow" ng-click="yourFunction()" /&gt;yellow
                   &lt;/label&gt;
               &lt;/div&gt;
           &lt;/form&gt;
           &lt;h2&gt;Array/Message Output Area&lt;/h2&gt;
           &lt;pre&gt;
               &lt;div ng-repeat="object in formCtrl.objects"&gt;
                    {{ object.name }}
               &lt;/div&gt;
               {{ message }}
           &lt;/pre&gt;
           &lt;!-- SHOW OFF OUR FORMDATA OBJECT --&gt;
           &lt;h2&gt;Boolean Test Area&lt;/h2&gt;
           &lt;pre&gt;
              {{ formData }}
           &lt;/pre&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>AngularJS</strong></p>
  
  <pre><code>angular.module('formApp', [])
      .controller('FormController', ['$scope' ,function($scope) {
  
    $scope.formData = {};
  
    $scope.yourFuction = function(){
  
      var purple = $scope.purple;
      var yellow = $scope.yellow;
  
      if (purple === true &amp;&amp; yellow === true) {
          this.objects = groupOne
      } else if (purple === true) {
          this.objects = groupTwo
      } else if (yellow === true) {
          this.objects = groupOne + groupTwo
      }else{
          this.message = 'Nothing Selected'
      }
    };
  
      var groupOne = [
        { name: 'Grape'},
        { name: 'Wine'},
        { name: 'Toy Octipus'}
      ]
  
      var groupTwo = [
        { name: 'Banana'},
        { name: 'Lemon'},
        { name: 'Yellow Highlighter'}
      ]
  }]);
  </code></pre>