JSFiddle - React, Tailwind, and code Playground

HTML

<p>Try changing the value for "hello".  There are different behaviors in each case.</p>
<div ng-app>
    <div class="container" ng-init="things={'hello': 'world','foo': 'bar'};">
        <hr>
        <h3>Case 1</h3>
        <p>The bindings are linked and active as expected</p>
        <p>hello: <input type="text" ng-model="things.hello" /></p>
        <p>foo: <input type="text" ng-model="things['foo']" /></p>
        
        <hr>
        <h3>Case 2</h3>
        <p>The bindings only work for reading.</p>
        <ul>
            <li ng-repeat="(key, value) in things">
                <label>{{ key }}</label>
                <input type="text" ng-model="value" />
            </li>
        </ul>
        
        <hr>
        <h3>Case 3</h3>
        <p>The bindings only work for reading, and we don't have any access to the property names (that I know of).
        <ul>
            <li ng-repeat="thing in things">
                <label>Thing {{ $index }}</label>
                <input type="text" ng-model="thing" />
            </li>
        </ul>
        
        <hr>
        <h3>Case 4</h3>
        <p>The bindings work for read and write and we have access to the property names, but the input element loses focus with each character entered.</p>
        <ul>
            <li ng-repeat="(key, value) in things">
                <label>{{ key }}</label>
                <input type="text" ng-model="things[key]" />
            </li>
        </ul>    
            
        <hr>
        <h3>Output</h3>
        <p>hello: <span class="result">{{ things.hello }}</span></p>
            <p>foo: <span class="result">{{ things['foo'] }}</span></p>
    </div>
</div>

CSS

body { font-family: sans-serif }
h3 { font-weight: bold }
.result { color: red }