JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <script type="text/ng-template" id="example/a.html">
        <input type="text" ng-model="data.text"></input>
        <button ng-click="save()">Save</button>
        <br/>
        CtrlA: <strong>{{data.text}}</strong>
        <br/>
        Saved value: <strong>{{data.savedText}}</strong>
    </script>
    <script type="text/ng-template" id="example/b.html">
        <input type="text" ng-model="data.otherText"></input>
        <button ng-click="save()">Save</button>
        <br/>
        CtrlB: <strong>{{data.otherText}}</strong>
        <br/>
        Saved value: <strong>{{data.savedText}}</strong>
    </script>
    
    <div ng-controller="MainCtrl">
        <ul>
            <li><a href="/a">Route 1</a></li>
            <li><a href="/b">Route 2</a></li>
        </ul>
        <div ng-view>
            
        </div>
    </div>
</div>

JavaScript

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

function MainCtrl($scope) {
}

function CtrlA($scope, CtrlAService) {
    $scope.data = CtrlAService.scope;
    $scope.save = function() {
        $scope.data.savedText = $scope.data.text;
    }
}

function CtrlB($scope, CtrlBService) {
    $scope.data = CtrlBService.scope;
    $scope.save = function() {
        $scope.data.savedText = $scope.data.otherText;
    }
}

app.factory('CtrlAService', function() {
    return {
        scope: {},
    };
});

app.factory('CtrlBService', function() {
    return {
        scope: {},
    };
});

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/a', { templateUrl: 'example/a.html', controller: CtrlA });
    $routeProvider.when('/b', { templateUrl: 'example/b.html', controller: CtrlB });
    $routeProvider.otherwise({redirectTo: '/a'});
    
    $locationProvider.html5Mode(true);
}]);