Is there a way to trigger the click event of a parent div on its child checkbox in AngularJS? The Checkbox will have the attribute hidden, necessitating the parent div to act as the clickable element.
Sample HTML:
<body ng-app="checkboxApp">
<div ng-controller="MainController">
<h1>Hello Plunker!</h1>
<form name="myForm">
Value1:<input type="checkbox" ng-model="value1" /><br />
Value2:<input type="checkbox" value="value-2" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
<tt>value1 = {{value1}}</tt><br />
<tt>value2 = {{value2}}</tt><br />
<hr />
<div class="btn btn-primary">
Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" >
Value2:<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
</div>
</form>
</div>
</body>
Javascript Code:
angular.module('checkboxApp', []);
angular.module('checkboxApp')
.controller('MainController', [ '$scope', function MainController($scope){
$scope.value1 = true;
$scope.value2 = 'YES'
}]);
Check out the code on Plnkr: here
I've attempted using a click function() and ng-change, but haven't been successful in getting it to work properly yet.