Controller unable to download Wordpress JSON data - angularjs

Question

I can't seem to get my Wordpress JSON to work. I'm brand new to the AngularJS and Ionic worlds, so I've been reading and watching tutorials.
This is the relevant part of my app.js file:
(function() {
var app = angular.module('mybodyapp', ['ionic', 'angularMoment','LocalStorageModule']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url : '/',
templateUrl : 'index.html',
controller : 'MainController'
});
$stateProvider.state('list', {
url: '/list',
templateUrl: 'templates/list.html'
});
$stateProvider.state('edit', {
url: '/edit/:noteId',
templateUrl: 'templates/edit.html',
controller: 'EditCtrl'
});
$stateProvider.state('add', {
url: '/add',
templateUrl: 'templates/edit.html',
controller: 'AddCtrl'
});
$stateProvider.state('notes', {
url: '/notes',
templateUrl: 'templates/notes.html'
});
$stateProvider.state('posts', {
url: '/posts',
templateUrl: 'templates/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise("/");
});
// ...
I am able to grab data from Reddit through a controller, but not data from Wordpress. I found a good demo template but cannot figure out how to 'rewrite' the beginning of the JS controller. I removed the top of the original angular.module('starter.controllers', []) and put angular.module('mybodyapp') followed by:
.controller('AppCtrl', function($scope, $timeout, $rootScope) {
$rootScope.url = 'http://scottbolinger.com/wp-json/wp/v2/';
})
.controller('PostsCtrl', function( $scope, $http, DataLoader, $timeout, $ionicSlideBoxDelegate, $rootScope ) {
console.log('PostsCtrl');
$scope.loadPosts = function() {
DataLoader.get( $rootScope.url + 'posts' ).then(function(response) {
$scope.posts = response.data;
console.log( response.data );
}, function(response) {
console.log('error', response);
});
}
// Load posts on page load
$scope.loadPosts();
paged = 2;
$scope.moreItems = true;
// Load more (infinite scroll)
$scope.loadMore = function() {
if( !$scope.moreItems ) {
return;
}
var pg = paged++;
$timeout(function() {
DataLoader.get( $rootScope.url + 'posts' + '?page=' + pg ).then(function(response) {
angular.forEach( response.data, function( value, key ) {
$scope.posts.push(value);
});
if( response.data.length <= 0 ) {
$scope.moreItems = false;
}
}, function(response) {
$scope.moreItems = false;
console.log('error');
});
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast('scroll.resize');
}, 1000);
}
$scope.moreDataExists = function() {
return $scope.moreItems;
}
// Pull to refresh
$scope.doRefresh = function() {
console.log('Refreshing!');
$timeout( function() {
$scope.loadPosts();
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
};
})
.controller('PostCtrl', function($scope, $stateParams, DataLoader, $ionicLoading, $rootScope, $sce ) {
$ionicLoading.show({
noBackdrop: true
});
var singlePostApi = $rootScope.url + 'posts/' + $stateParams.postId;
DataLoader.get( singlePostApi ).then(function(response) {
$scope.post = response.data;
// Don't strip post html
$scope.content = $sce.trustAsHtml(response.data.content.rendered);
$ionicLoading.hide();
}, function(response) {
console.log('error', response);
});
});

Answer 1

The name in your ng-app directive must match your module name. The name in your ng-controller directive must match your controller name.
For more information on the ng-app directive see the AngularJS ng-app API Reference.
For the ng-controller directive, AngularJS ng-controller API Reference
UPDATE
The demo you grabbed has three controllers. You need to make them methods of angular.module
angular.module('mybodyapp').controller('AppCtrl',...
angular.module('mybodyapp').controller('PostsCtrl', function( $sc
angular.module("mybodyapp").controller('PostCtrl', function($scope