title: ng-click child checkbox of Parent div
body: <p>How do you make a parent div click propagate to its child checkbox in AngularJS?  The Checkbox will have the <code>hidden</code> attribute, so we need to allow the parent div be the clickable entity.</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;body ng-app="checkboxApp"&gt;
      &lt;div ng-controller="MainController"&gt;
        &lt;h1&gt;Hello Plunker!&lt;/h1&gt;
        &lt;form name="myForm"&gt;
          Value1:&lt;input type="checkbox" ng-model="value1" /&gt;&lt;br /&gt;
          Value2:&lt;input type="checkbox" value="value-2" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /&gt;&lt;br /&gt;
          &lt;tt&gt;value1 = {{value1}}&lt;/tt&gt;&lt;br /&gt;
          &lt;tt&gt;value2 = {{value2}}&lt;/tt&gt;&lt;br /&gt;
  
          &lt;hr /&gt;
  
          &lt;div class="btn btn-primary"&gt;
            Value1 (hidden):&lt;input type="checkbox" ng-model="value1" hidden/&gt;&lt;br /&gt;
          &lt;/div&gt;
          &lt;div class="btn btn-primary" &gt;
            Value2:&lt;input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /&gt;&lt;br /&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module('checkboxApp', []);
  
  angular.module('checkboxApp')
    .controller('MainController', [ '$scope', function MainController($scope){
      $scope.value1 = true;
      $scope.value2 = 'YES'
    }]);
  </code></pre>
  
  <p>Plnkr: <a href="http://plnkr.co/edit/WuYbZuw1NGVSiX23mHUP?p=preview" rel="nofollow">here</a></p>
  
  <p>I have tried a click function() as well on the ng-change, but I still can't get it working.</p>