JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ctrl">
    <select ng-model="selectedCity" ng-options="x as (x | cityFilter) for (x, y) in cities">
    </select>


<table>
    <tr ng-repeat="item in cities[selectedCity]">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
    </tr>
</table>
</div>

JavaScript

angular.module('app', [])
    .filter('cityFilter', function() {
        return function(city) {
            return city.replace('_', ' ');
        }
    })
    .controller('ctrl', function($scope) {
        $scope.cities = {
            city: [{
                id: 'c01',
                name: 'name1',
                price: 15
            }, {
                id: 'c02',
                name: 'name2',
                price: 18
            }, {
                id: 'c03',
                name: 'name3',
                price: 11
            }],
            city_02: [{
                id: 'cc01',
                name: 'name11',
                price: 10
            }, {
                id: 'cc02',
                name: 'name22',
                price: 14
            }, {
                id: 'cc03',
                name: 'name33',
                price: 11
            }],
            city_03: [{
                id: 'ccc01',
                name: 'name111',
                price: 19
            }, {
                id: 'ccc02',
                name: 'name222',
                price: 18
            }, {
                id: 'ccc03',
                name: 'name333',
                price: 10
            }]
        };

        $scope.selectedCity = 'city_02';
    });