Присвойте значение ng-модели с помощью переключателя

Question

Я новичок в Angular JS, так что следите за моими ошибками. Я пытаюсь присвоить значение ng-модели с помощью динамически создаваемых переключателей. Пока что это то, что у меня есть:

<div data-ng-init="radio=['Core','Software Development','Systsmes Analysis','All']">
    <div data-ng-repeat="r in radio">
        <div class="form-check">
            <input class="form-check-input" type="radio" data-ng-model="types" data-ng-value="types='{{r}}'" name="type" id="{{r}}">
            <label class="form-check-label" for="{{r}}">
                {{r}}
            </label>
        </div>
    </div>
    <p>You chose {{types}}</p>
</div>

Я могу вывести переключатели, как показано здесь:

Но я не могу вывести выбранное значение переключателей.

То, что я хочу достичь, выглядит примерно так:

Где значение выбранного переключателя появляется в «Вы выбрали х».

Любая помощь очень ценится. Спасибо за чтение.

Answer 1

Вам необходимо использовать объект с точечной нотацией:

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.radio = { type: '' }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-init="radio=['Core','Software Development','Systems Analysis','All']">
    <div ng-repeat="r in radio">
      <div class="form-check">
        <input class="form-check-input" id="{{r}}" type="radio" ng-model="radio.type" ng-value="'{{r}}'" name="type">
        <label class="form-check-label" for="{{r}}">{{r}}</label>
      </div>
    </div>
    <p>You chose {{radio.type}}</p>
  </div>
</div>