JSFiddle - React, Tailwind, and code Playground

by rur_d

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<div ng-app>
    <div ng-controller="TestCtrl">
        <label for="value1">Value 1</label><input type="text" name="value1" value="" id="value1" ng-model="value1">
        <label for="value2">Value 2</label><input type="text" name="value2" value="" id="value2" ng-model="value2">
        <input type="button" name="apply" value="Apply" ng-click="apply()" id="apply">
        <p>Value3 = {{value3}}</p>
        <p>Value4 = {{value4}}</p>
    </div>
</div>

<script type="text/javascript" charset="utf-8">
    function TestCtrl ($scope, $log) {
        var count = 0,
            dirty = false;
        $scope.$watch(function(){
            if(dirty){
                $scope.$evalAsync(function () {
                    $log.log("Watch " + (count) + " Triggered - ({3: "+
                                $scope.value3+", 4: "+$scope.value4+" }");
                });
                dirty = false;
            }
        })

        $scope.$watch("value3", function(){
            dirty = true;
        });
        $scope.$watch("value4", function(){
            dirty = true;
        });
        
        $scope.apply = function(){
            $scope.value3 = $scope.value1;
            $scope.value4 = $scope.value2;
        }
    }
</script>