JSFiddle - React, Tailwind, and code Playground

by jamesmoey

HTML

<body ng-app="app" ng-controller="MainController as main">
	<select ng-options="c.recipes as c.name for c in main.categories" ng-model="main.categorySelected"></select>
	<select ng-options="c as c.name for c in main.categorySelected" ng-model="main.recipeSelected"></select>
	{{ main.recipeSelected }}
</body>

JavaScript

angular.module("app", [])
    .controller("MainController", function($scope) {
        this.categories = [
            {
                name: 'Thai',
                image: 'img/thai.jpg',
                recipes: [{
                    name: "Pad Thai",
                    recipe: "Recipe text goes here"
                }, {
                    name: "Tom Yum",
                    recipe: "Recipe text goes here"
                }]
            }, {
                name: "Mexican",
                image: "img/mexican.jpg",
                recipes: [{
                    name: "Tacos",
                    recipe: "Recipe text goes here"
                }, {
                    name: "Nachos",
                    recipe: "Recipe text goes here"
                }]
            }
        ]
    })
;