Div with ng-repeat dissapears after radio click

Question

I have 2 divs of 4 radio buttons each. When the user clicks the radio button in one of the divs, the entire div will disappear. The same thing happens with the remaining div. fiddle: http://jsfiddle.net/350L9upu/2/

Below is my setup:

HTML:

<div ng-controller="MyCtrl">
    <div ng-repeat="(key, value) in questions">
        <div ng-repeat="(keyTwo, valueTwo) in value">{{keyTwo}}
            <div ng-repeat="(keyThree, valueThree) in valueTwo">
                <input type="radio" ng-model="questions[key]" name="{{key}}" ng-value="{{keyThree}}" />{{valueThree}}</div>
        </div>
    </div>
</div>

Controller:

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

function MyCtrl($scope) {
    var json = {
        "0": {
            "question0": {
                "1": "1",
                "2": "2",
                "3": "3",
                "4": "4"
            }
        },
        "1": {
            "question1": {
                "1": "1",
                "2": "2",
                "3": "3",
                "4": "4"
            }
        }
    };


    $scope.questions = json;

}

Why would the checked attribute, when fired, do that? I do not see how it is connected to any javascript.

Answer 1

That is because by doing ng-model="questions[key]" you are resetting the ng-repeated object with the selected value. i.e when you select the first radio group, json[0] gets updated from the object to the value. So there is basically nothing to repeat upon and it looks like that group just gets removed from DOM and angular completed the digest cycle. So set your ng-model to a different object.

Also note that while using ng-value note that do not provide interpolated value, instead provide the binding as is. i.e change ng-value="{{keyThree}}" to ng-value="keyThree". And i would just use ng-attr-name="{{key}}" instead of name="{{key}}".

It is probably time to upgrade angular, what you have a very old version of angular

Example implementation:

In your controller, define an object to store the answers:

$scope.answered = {};

and in your view:

   <div ng-repeat="(keyThree, valueThree) in valueTwo">
        <input type="radio" ng-model="answered[key]" 
            ng-attr-name="{{key}}" ng-value="keyThree" />{{valueThree}}</div>
    </div>

Fiddle