JSFiddle - React, Tailwind, and code Playground

by RedDevil

HTML

<html lang="en" ng-app="application">
<head>
  <script>
    angular.module('application',[])
      .controller('mainCtrl', ['$scope', function($scope) {
        $scope.variable = null;
      // this function is called when you click the button.
      // instead, you can just call this function here, and it would still
      // work the same way.
        $scope.changeValue = function() {
          $scope.variable = "NYAN_CAT";
        }
      
      // uncomment this line to see the programmatic change:
        $scope.changeValue()
      
      // note that in angularjs, you deal with the MODEL value, instead of the 
      // input value directly.
        $scope.$watch(function() {
          return $scope.variable
        }, function(newVal, oldVal) {
          if(newVal !== null) {
            window.alert('programmatically changed');
          }
        });
      }
    ]);
  </script>
</head>
<body ng-controller="mainCtrl">
  <p>The variable's value is: <strong>{{variable}}</strong></p>
  <input type="text" data-ng-model="variable">
  <button type="button" data-ng-click="changeValue()">Change</button>
</body>
</html>