Combining results from WP-API using AngularJS

I’ll assume the html you posted is a template that is part of a theme or plugin where you can interact with the page loading routines.

You do not need to load jQuery, it is already loaded by WordPress. Instead, you should leverage the script loading system. The third parameter in wp_enqueue_script states dependencies: my-app needs angular to be loaded, angular needs jQuery to be loaded.

<?php
add_action( 'get_header', 'add_to_header');

function add_to_header () {
    add_action( 'wp_enqueue_scripts', 'add_my_scripts');
}

function add_my_scripts () {
    wp_enqueue_script('angular', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js', array( 'jquery' ));
    // you could load your angular app script here from a separate file, like:
    wp_enqueue_script('my-app', 'path/to/my-app.js', array( 'angular' ));
}
?>

From a look at your page, I can see no reason why you need more than one controller, or more than one regional listing areas. Leave off the style and jQuery script, position your select(s) inside the controller scope and set a value for each option:

<select ng-model="region" ng-change="load(region)">
    <option value="northwest">NorthWest</option>
    ...
</select>

Your controller then should have a function loading the regional data only as needed:

var url="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=";
$scope.data_ready = false;
$scope.load = function (region) {
    $http.get(url + region).then(function(data) {
    $scope.data = data.data;
    $scope.data_ready = true;
});

The data_ready variable will hide or show your listing area:

<div ng-show="data_ready">
   <div ng-repeat="d in data">
       ...

As the data loaded changes, so will content of the listing area.

Related Posts: