JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

<div ng-app="App" ng-controller="Ctrl">
    <form name="myForm">Try clicking on the labels.
        <br/>
        <label>Bad label:
            <input type="checkbox" ng-checked='value1' ng-click='toggleValue1()'>
        </label>
        <br/>
        <label for="chk" ng-click="$event.preventDefault();">Good label:</label>
        <input id="chk" type="checkbox" ng-checked="value2" ng-click='toggleValue2()'>
        <br/> <tt>value1 = {{value1}}</tt>

        <br/> <tt>value2 = {{value2}}</tt>

        <br/> <tt>fire_count = {{fire_count}}</tt>

    </form>
</div>

JavaScript

angular.module('App', []);
//var app = angular.module('App', []);

//app.controller('MainCtrl', function($scope) {});
function Ctrl($scope) {
    $scope.value1 = true;
    $scope.value2 = 'YES'
    $scope.fire_count = 0;

    $scope.toggleValue1 = function () {
        $scope.value1 = !$scope.value1;
        $scope.fire_count++;
        console.log("Clicked Toggler 1!");
    }

    $scope.toggleValue2 = function () {
        $scope.value2 = !$scope.value2;
        $scope.fire_count++;
        console.log("Clicked Toggler 2!");
    }
}