JSFiddle - React, Tailwind, and code Playground

by Jonathan Smith

HTML

<body ng-app="testApp">
    <form name="myForm" id='CtrlHost' ng-controller="Ctrl">
        <input type="Button" value="Change Inside Angular" ng-click="ChangeIt()" />
        <input type="Button" value="Change Outside Angular" onclick="OutsideAngularChange()" />
      </form>
  </body>

JavaScript

angular.module('testApp', [])
    .controller('Ctrl', function($scope, MyService) {
        var NewPropValue = 1;
        $scope.ChangeIt = function () {
            alert("scope.changeit called");
              NewPropValue++;
              MyService.SetMyProp(NewPropValue);
        };
        $scope.$watch(MyService.GetMyProp, function (newValue) {
            alert("NewValue from Watch = " + newValue);   
        });
    }).service('MyService', function () {
       var myProp;
       
        this.GetMyProp = function () {
            return MyProp;
        };
        
        this.SetMyProp = function (newProp) {
            MyProp = newProp;   
        };
    });

function OutsideAngularChange() {
                  alert("OutsideAngularChange called")
    angular.element(document.getElementById('CtrlHost')).scope().ChangeIt();
    angular.element(document.getElementById('CtrlHost')).scope().$apply();
}