ng-repeat displays model but not updating it

Question

I have a directive:

<button ng-click="update()">Update channels for {{id}}</button><br/>  
<li ng-repeat="(k,v) in entries">
    {{k}} is {{v}}
    <input type="text" ng-model="v"></input>
</li>


controller: ($scope, $resource) ->
    Query = $resource('/dmx/getdefs/:id')

    Query.get {id: $scope.id}, (res) ->
       $scope.entries = res
       return

It retrieves the data from the server and display them. No problem here. I edit one value. However, when I click on update, I can see in my handler that $scope.entries has NOT changed.

Why ?

I'm able to fix this: - Rather than server returns a dictionnay {'red': 200, 'blue': 100} instead I return an array [ {'key' : 'red', 'val': 200}, {'key': blue, 'val': 100}].

If I change the directive to:

<li ng-repeat="item in entries">
   {{item.key}} has {{item.val}}
    <input type="text" ng-model="item.val"></input>
</li>

it works fine. But is there a way without an array ? Seems Angular is able to display a dictionnary with ng-repeat but not able to do databinding both ways.

Answer 1

The array way seems to be the right way of doing it. see here.

If you insist on iterating through your original object, you can change your HTML to something like:

    <li ng-repeat="(k,v) in entries">
        {{k}} is {{v}}
       <input type="text" ng-model="$parent.entries[k]"></input>
   </li>

$parent is used since ng-repeat creates a child scope for each instance of the repeated element.

Answer 2

Each repeated element is getting it's own scope so you need to do something like this to reference the entries object:

<input type="text" ng-model="entries[k]"></input>