JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en" ng-app="application">
<head>
  <meta charset="UTF-8">
  <title>Angular JS Tests</title>
  <script src="js/angular.js"></script>
  <script>
    angular.module('application',[])
      .controller('mainCtrl', ['$scope', function($scope) {
        $scope.variable = null
        $scope.$watch(function() {
          return $scope.variable
        }, function(newVal, oldVal) {
          if(newVal === 'PROGRAMMATICALLY CHANGED') {
            window.alert('programmatically called');
          }
        });
      }
    ]);
  </script>
</head>
<body ng-controller="mainCtrl">
  <p>The variable's value is: <strong>{{variable}}</strong></p>
  <input type="text" id="myInput" data-ng-model="variable">
  <button type="button" data-ng-click="variable='PROGRAMMATICALLY CHANGED'">Change</button>
</body>
</html>

JavaScript

var myInput=document.getElementById("myInput");
myInput.value="My New Value";