JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="regionsCtrl">
  <label>Select a region:</label>
  <select ng-options="region for region in regions" ng-model="region" ng-change="getRegionData()">
  </select>
  <table>
    <tr>
      <th>id</th>
      <th>Title</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
    <tr ng-repeat="d in data">
      <td>{{d.ID}}</td>
      <td>{{d.title}}</td>
      <td>{{d.status}}</td>
      <td>{{d.type}}</td>
    </tr>
  </table>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('regionsCtrl', function($scope, $http) {
  $scope.regions = [
    'North West', 'North East', 'Midlands', 'East Anglia', 'South East', 'South West', 'Scotalnd', 'Wales'
  ]
  
  $scope.getRegionData = function() {
    var region = $scope.region
    $http.get("http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=#{region}").then(function(data) {
      $scope.data = data; //this is the data that server returns
    })
  }
  

});