JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div ng-app="app">
    
    <script type="text/ng-template" id="fruitDetails.html">
        <h2>Details</h2>
        <p>{{ fruit.name }}</p>
    </script>
    
    <div class="module" ng-controller="FruitCtrl">
        <h1>Fruit Module</h1>
        <div ng-switch="moduleState">
            <div ng-switch-when="list">
                <ul>
                    <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
                </ul>
            </div>
            <div ng-switch-when="details">
                <p>Details for {{ selectedFruit }}</p>
                <a href="#" ng-click="showList()">Back to list</a>
            </div>
        </div>
    </div>
    <div class="module" ng-controller="CarCtrl">
        <h1>Car Module</h1>
        <ul>
            <li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li>
        </ul>
    </div>
</div>

CSS

.module {
    padding: 10px;
    background-color: #ddd;
    margin-bottom: 25px;
}

JavaScript

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

function FruitCtrl($scope) {
    $scope.moduleState = 'list';
    $scope.fruits = ['Banana', 'Orange', 'Apple'];

    $scope.showDetail = function (fruit) {
        $scope.selectedFruit = fruit;
        $scope.moduleState = 'details';
    }
    
    $scope.showList = function()
    {
        $scope.moduleState = 'list';
    };
}

function CarCtrl($scope) {
    $scope.cars = ['Volvo', 'Mercedes', 'BMW'];

    $scope.showDetail = function (car) {
        alert('This should show the detail page for ' + car);
    }
}