Using ngModel in ngRepeat

Here is an issue with the current directives implementation of ngRepeat when using it with ngModel to modify items in the collection.

by kiokotzu

HTML

<h1>Using <code>ngModel</code> in <code>ngRepeat</code></h1>
<div ng-app ng-controller="AController">
    
    <h2>First attempt</h2>
    <div>ngModel doesn't work at all because the values are not bound. Also, strings are immutable.</div>
    <br />
    item in <code>{{ itemsInObj | json }}</code>
    <ul>
        <li ng-repeat="item in itemsInObj">
            item = <input ng-model="item" />
        </li>
    </ul>
    (key, value) in <code>{{ itemsInObj | json }}</code>
    <ul>
        <li ng-repeat="(key, value) in itemsInObj">
            key = {{key}}, value = <input ng-model="value" />
        </li>
    </ul>
    item in <code>{{ itemsInArray | json }}</code>
    <ul>
        <li ng-repeat="item in itemsInArray">
            item = <input ng-model="item" />
        </li>
    </ul>
    
    <h2>Second attempt</h2>
    <div>You won't understand why this doesn't work until you try to type more than one character.
        The edited items are being compiled, linked on top of the old ones because they are treated as new items in the collection in the position of the old items.</div><br />
    (key, value) in <code>{{ itemsInObj | json }}</code>
    <ul>
        <li ng-repeat="(key, value) in itemsInObj">
           key = {{key}}, value = {{value}}, itemsInObj[key] = <input ng-model="itemsInObj[key]" />
        </li>
    </ul>
    item in <code>{{ itemsInArray | json }}</code>
    <ul>
        <li ng-repeat="item in itemsInArray">
            $index = {{$index}}, itemsInArray[$index] = <input ng-model="itemsInArray[$index]" />
        </li>
    </ul>
    
    <h2>Workarounds</h2>
    <div>This is what currently works. Encapsulating the items in objects keeps them equal in ngRepeat's internal mapping.</div><br />
    obj in <code>{{ objsInObj | json }}</code>
    <ul>
        <li ng-repeat="obj in objsInObj">
            obj.str = <input ng-model="obj.str" />
        </li>
    </ul>
    obj in <code>{{ objsInArr | json }}</code>
    <ul>
        <li...

JavaScript

function AController($scope) {
    $scope.itemsInObj = {
        a: "strA",
        b: "strB",
        c: "strC"
    };
    $scope.itemsInArray = ["strA", "strB", "strC"];

    $scope.objsInObj = {
        a: {
            str: "strA"
        },
        b: {
            str: "strB"
        },
        c: {
            str: "strC"
        }
    };
    $scope.objsInArr = [ { str: "strA"}, { str: "strB"}, { str: "strC"} ];
}