JSFiddle - React, Tailwind, and code Playground

by andyw_

HTML

<div ng-app="MyApp">
    <div ng-controller="controller1">
        
    </div>
    <div ng-controller="controller2">
        <button ng-click="changeServiceProperty()">changeServiceProperty</button>
    </div>
</div>

JavaScript

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

app.service('MyService', function() {
    return {
        someProperty: 0
    }
});

app.controller('controller1', ['$scope', 'MyService', function ($scope, service) {

    // does not work
    $scope.$watch(service, function () {
        console.log('first working.');
    }, true);

    // works
    $scope.$watch(function () {
        return service;
    }, function () {
        console.log('second working.');
    }, true);
}]);

app.controller('controller2', ['$scope', 'MyService', function($scope, service) {
    $scope.changeServiceProperty = function() {
        service.someProperty += 1;
        console.log(service);
    }
}]);