JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test" ng-controller="MainCtrl">
    <div ng-model="item" ng-controller="ItemCtrl" >{{item}}</div>
    <button ng-click="change()">change</button>
</div>

JavaScript

angular.module('test', [])
    .service('itemsService', function(){
        var item ={};
        
        return{
            getItems: function(){
                return item;
            },
            changeItem: function( value){
                item = value;
            }
        }
    })
    .controller('MainCtrl', function($scope, itemsService) {
        $scope.item = itemsService.getItems();       
        
        $scope.change = function() {
            itemsService.changeItem('X');
        }

    })
    .controller('ItemCtrl', function($scope) {
        $scope.item="10";
    })
    });