JSFiddle - React, Tailwind, and code Playground

by Mandeep Singh

HTML

<body>
  <div ng-app="A">
    <div ng-controller="AC">
        Name: 
        <br/>
        <input type="text" ng-model="name" /> 
        <br/>
        <ul>
            <li ng-repeat="coworker in coworkers | filter:name">{{ coworker.name }} - {{ coworker.city }}</li>
        </ul>
        <p>You are searching for <em>{{ name }}</em></p>
    </div>
</div>
<div ng-app="B">
    <div ng-controller="BC">
        <ul>
            <li ng-repeat="fruit in fruits">{{ fruits }}</li>
        </ul>
    </div>
</div>
<script>
var searchModj = angular.module('A', []);


var controllers = {};

controllers.AC = function ($scope){

    $scope.coworkers = [
            {name: 'Joe Bob', city: 'Ukrainia'},
            {name: 'Adam Blobnovski', city: 'Logan' },
            {name: 'Carlos Sanchez', city: 'Deerbushle'},   
            {name: 'Martin Kellerweller', city: 'Pear'},
            {name: 'John Doe',  city: 'New York City'}
        ];
};

searchModj.controller(controllers);


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



controllers.BC = function ($scope) {

    $scope.fruits = ['apple', 'banana', 'pear'];

};

fruitModj.controller(controllers);
</script>