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">
    <div class="module" ng-controller="FruitCtrl">
        <h1>Fruit Module</h1>
        <ul>
            <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
        </ul>
    </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.fruits = ['Banana', 'Orange', 'Apple'];

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

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

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