JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='App'>
    <section>
        <div ng-controller="ContentCtrl" id="content-body" class="container search-page">
            <!-- begin content-body -->
            <div id="content-frame" class="container"></div>
            <!-- end content-frame -->
            <section>
                <div class="search-container">
                    <div class="search-wrapper">
                        <input type="search" class="input-from" autocomplete="off" placeholder="Search" ng-model="searchText" />
                    </div>
                </div>
            </section>
            <section>
                <div>
                    <ul class="list-group search">
                        <li ng-repeat="city in cities | filter:searchText | limitTo:limit"> 
                            <a ng-click="setMaster(city)" class="list-group-item">{{city}}</a>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </section>
</div>

JavaScript

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

app.controller('ContentCtrl', function($scope, $http) {
    $scope.data = {
        "version": "082B6AF45261B81358E8F99F0FAEC4A4",
            "cities": [
            "A Friela Maside, Spain",
            "A Gudina, Spain",
            "AHA, Germany",
            "AL, Norway"]
    };
    
    $scope.cities = [];
    $scope.limit = 10; // max 10 cities loaded

    $scope.fetchContent = function () {
        $scope.cities = $scope.data.cities;
    }

    $scope.fetchContent(); // build cities list

    $scope.setMaster = function (city) {
        $scope.searchText = city; // pull selected city using {{selected | json}}
    }
});