Wordpress Rest Api ionic app loading <p>I'm developing a Wordpress Ionic application using the Wordpress REST API and Jetpack. I followed a tutorial <a href="https://www.youtube.com/watch?v=jbopML8dnqg" rel="nofollow noreferrer">Hybrid Mobile Application with Ionic/Cordova</a>, but ran into an ugly problem. When I enter my REST API link in <code>$http.get()</code> and try it in my browser it keeps loading like this:</p> <p><a href="https://i.stack.imgur.com/tAY9L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tAY9L.png" alt="http://imgur.com/gallery/6lqUK2M/"></a></p> <p>On the other hand, the <a href="http://But%20when%20I%20but%20freshly-press%20api%20it%20works" rel="nofollow noreferrer">Freshy-Pressed Api</a> works, though I don't know why.</p> <p>Here is the HTML and JavaScript I'm using:</p> <pre class="lang-js prettyprint-override"><code>var FPApp = angular.module("FPApp", ["ionic"]); FPApp.service("FPSvc", ["$http", "$rootScope", FPSvc]); FPApp.controller("FPCtrl", ["$scope", "$sce", "$ionicLoading", "$ionicListDelegate", "$ionicPlatform", "FPSvc", FPCtrl]); function FPCtrl($scope, $sce, $ionicLoading, $ionicListDelegate, $ionicPlatform, FPSvc) { $ionicLoading.show({template: "Loading blogs..."}); $scope.deviceReady = false; $ionicPlatform.ready(function() { $scope.$apply(function() { $scope.deviceReady = true; }); }); $scope.blogs = []; $scope.params = {}; $scope.$on("FPApp.blogs", function(_, result) { result.posts.forEach(function(b) { $scope.blogs.push({ name: b.author.name, avatar_URL: b.author.avatar_URL, title: $sce.trustAsHtml(b.title), URL: b.URL, featured_image: b.post_thumbnail.URL }); }); $scope.params.before = result.date_range.oldest; $scope.$broadcast("scroll.infiniteScrollComplete"); $scope.$broadcast("scroll.refreshComplete"); $ionicLoading.hide(); }); $scope.loadMore = function() { FPSvc.loadBlogs($scope.params); } $scope.reload = function() { $scope.blogs = []; $scope.params = {}; FPSvc.loadBlogs(); } $scope.show = function($index) { cordova.InAppBrowser.open($scope.blogs[$index].URL, "_blank", "location=no"); } $scope.share = function($index) { $ionicListDelegate.closeOptionButtons(); window.socialmessage.send({ url: $scope.blogs[$index].URL }); } } function FPSvc($http, $rootScope) { this.loadBlogs = function(params) { $http.get("https://public-api.wordpress.com/rest/v1/sites/100060382/posts/", { params: params}) .success(function(result) { $rootScope.$broadcast("FPApp.blogs", result); }); } } </code></pre> <pre class="lang-html prettyprint-override"><code>&lt;html lang="en" data-ng-app="FPApp"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;!--Setup Cordova--&gt; &lt;meta http-equiv="Content-Security-Policy" content="default-src *;"&gt; &lt;script src="cordova.js"&gt;&lt;/script&gt; &lt;!--Setup Ionic--&gt; &lt;link rel="stylesheet" href="lib/ionic/css/ionic.css"&gt; &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt; &lt;!--Setup Application--&gt; &lt;link rel="stylesheet" href="index.css"&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body data-ng-controller="FPCtrl"&gt; &lt;ion-pane&gt; &lt;div class="bar bar-header bar-energized"&gt; &lt;h1 class="title"&gt;ZahranPress&lt;/h1&gt; &lt;/div&gt; &lt;ion-content class="background"&gt; &lt;ion-refresher pulling-text="Pull" on-refresh="reload()"&gt; &lt;/ion-refresher&gt; &lt;div class="list card" data-ng-repeat="b in blogs"&gt; &lt;div class="item item-avatar"&gt; &lt;img data-ng-src="{{b.avatar_URL}}" alt=""&gt; &lt;h2 data-ng-bind-html="b.title"&gt;&lt;/h2&gt; &lt;p&gt; {{ b.name }} &lt;/p&gt; &lt;/div&gt; &lt;div class="item item-body"&gt; &lt;img data-ng-if="b.featured_image" data-ng-src="{{ b.featured_image }}" alt="" class="full-image"&gt; &lt;/div&gt; &lt;div class="item tabs tabs-secondary tabs-icon-left"&gt; &lt;a class="tab-item" data-ng-click="show($index)"&gt; &lt;i class="icon ion-ios-book"&gt;&lt;/i&gt; Read &lt;/a&gt; &lt;a class="tab-item" data-ng-click="share($index)"&gt; &lt;i class="icon ion-share"&gt;&lt;/i&gt; Share &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ion-infinite-scroll on-infinite="loadMore()" ng-if="deviceReady"&gt;&lt;/ion-infinite-scroll&gt; &lt;/ion-content&gt; &lt;/ion-pane&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>How do I resolve this problem?</p>