Radio button's data-ng-model/data-ng-change not working with data-ng-repeat

Question

A]
When not used with data-ng-repeat, the radio button's data-ng-change works properly.
Upon changing the radio selected, the function, updatedLanguageTrigger(languageSelected) is called, and the value is logged properly.
This is the jsp code, which works:

<div spacing="${'mini'}">
    <div gridUnits="6"
                  cssClass="language-switcher-radio-button">
        <input type="radio"
               id="language-switcher-en_IN"
               name="language-switcher-radio"
               data-ng-swipe-input-tag="true"
               value="en_IN"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-en_IN">
            <span class="centre-vertical-and-horizontal">English</span>
        </label>
    </div>
    <div gridUnits="6"
                  cssClass="language-switcher-radio-button"
                  position="last">
        <input type="radio"
               id="language-switcher-hi_IN"
               name="language-switcher-radio"
               value="hi_IN"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-hi_IN">
            <span
            class="centre-vertical-and-horizontal">Hindi</span>
        </label>
    </div>
</div>

B]
But, when used with data-ng-repeat, it works only for the first 2 times.
(i.e First selecting English radio works, then selecting Hindi radio works, but again selecting English radio, doesn't work, and all the subsequent changes don't work).
With work, I mean that the function updatedLanguageTrigger(languageSelected) is called, with the correct value.

<div spacing="${'mini'}"
           data-ng-repeat="languageCode in auxLanguages"
           data-ng-if="$index % 2 == 0">
    <div gridUnits="6"
                  cssClass="language-switcher-radio-button"
                  data-ng-attr-position="$last ? 'last' : undefined">
        <input type="radio"
               id="language-switcher-{{auxLanguages[$index]}}"
               name="language-switcher-radio"
               value="{{auxLanguages[$index]}}"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-{{auxLanguages[$index]}}">
            <span class="centre-vertical-and-horizontal">{{radioButtonTexts[$index]}}</span>
        </label>
    </div>
    <div gridUnits="6"
                  data-ng-if="($index + 1) < auxLanguages.length"
                  cssClass="language-switcher-radio-button"
                  position="last">
        <input type="radio"
               id="language-switcher-{{auxLanguages[$index + 1]}}"
               name="language-switcher-radio"
               value="{{auxLanguages[$index + 1]}}"
               data-ng-model="languageSelected"
               data-ng-change="updatedLanguageTrigger(languageSelected)"/>
        <label for="language-switcher-{{auxLanguages[$index + 1]}}">
            <span class="centre-vertical-and-horizontal">{{radioButtonTexts[$index + 1]}}</span>
        </label>
    </div>
</div>

This is the HTML code generated in Firefox Inspector:

<div data-ng-if="$index % 2 == 0" data-ng-repeat="languageCode in auxLanguages" class="a-row a-spacing-mini ng-scope">
    <div data-ng-attr-position="$last ? 'last' : undefined" class="a-column a-span6 language-switcher-radio-button">
        <input type="radio" id="language-switcher-en_IN" name="language-switcher-radio" value="en_IN" data-ng-model="languageSelected" data-ng-change="updatedLanguageTrigger(languageSelected)" class="ng-valid ng-dirty">
        <label for="language-switcher-en_IN" class="">
            <span class="centre-vertical-and-horizontal ng-binding">English</span>
        </label>
    </div>
    <!-- ngIf: ($index + 1) < auxLanguages.length --><div data-ng-if="($index + 1) < auxLanguages.length" class="a-column a-span6 language-switcher-radio-button a-span-last ng-scope">
    <input type="radio" id="language-switcher-hi_IN" name="language-switcher-radio" value="hi_IN" data-ng-model="languageSelected" data-ng-change="updatedLanguageTrigger(languageSelected)" class="ng-valid ng-dirty">
    <label for="language-switcher-hi_IN">
        <span class="centre-vertical-and-horizontal ng-binding">कैंसिल&lt;br&gt;Hindi</span>
    </label>
    </div><!-- end ngIf: ($index + 1) < auxLanguages.length -->
</div>

---

This is the AngularJS function which is being referred in both the above cases:

$scope.updatedLanguageTrigger = function(value) {
     console.log("Entering UpdatedLanguageTrigger()");
     console.log("Language switcher value" + value);
};

What am I missing here?

I tried following this: https://stackoverflow.com/a/21603553/8855983. But, it didn't work.

Answer 1

You are using the same ng-model for all of your inputs. Changing data-ng-model and data-ng-change with following should work.

    <input type="radio"
           id="language-switcher-{{auxLanguages[$index + 1]}}"
           name="language-switcher-radio"
           value="{{auxLanguages[$index + 1]}}"
           data-ng-model="languageCode.languageSelected"
           data-ng-change="updatedLanguageTrigger(languageCode.languageSelected)"/>