JSFiddle - React, Tailwind, and code Playground

by TheRodeo

HTML

<div class="main" ng-app="myApp" ng-controller="MyCtrl">    
    <div class="list">
        <label class="item item-radio" ng-repeat="breakfastRecipe in breakfastRecipes" for="{{breakfastRecipe.name}}" ng-click="closeModal()">
            <input type="radio" ng-model="breakfast.favourite" ng-value="breakfastRecipe.name" id="{{'breakfast'+breakfastRecipe.id}}" name="boolean" />
                
        </label><br />
        {{breakfast.favourite}}
    </div>
    <button ng-click="addItem()">Add Another</button>
    <div>
        <ul>
            <li ng-repeat="breakfastItem in breakfast  track by $index">{{breakfastItem}}</li>
        </ul>
    </div>
</div>

JavaScript

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

app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.breakfastRecipes = [{id : 1, name : 'BreakfastRecipe1'},{id : 2, name : 'BreakfastRecipe2'},{id : 3, name : 'BreakfastRecipe3'},{id : 4, name : 'BreakfastRecipe4'}];
  $scope.breakfast=[];
    $scope.addItem = function()
    {
        $scope.breakfast.push($scope.breakfast.favourite);
    }
}]);