title: Manipulate Data with JSON using Angular JS for WordPress JSON API
body: <p>I tested code in <a href="http://fdietz.github.io/recipes-with-angular-js/consuming-external-services/requesting-json-data-with-ajax.html" rel="nofollow noreferrer">this post</a> and modified a bit for my use. But I cannot get JSON object from API of my blog that I have generated using WordPress JSON plugin.</p>
  
  <ol>
  <li>URL API from BLOG (NOT WORKING): <a href="http://teckstack.com/api/get_recent_posts" rel="nofollow noreferrer">http://teckstack.com/api/get_recent_posts</a></li>
  <li>URL from W3C example (WORKING):  <a href="http://www.w3schools.com/website/Customers_JSON.php" rel="nofollow noreferrer">http://www.w3schools.com/website/Customers_JSON.php</a></li>
  </ol>
  
  <p>I stuck when tried to manipulated JSON API from my blog (mentioned above) and the same code worked for the other url provided by w3c example?</p>
  
  <p>Please provide your suggestion.</p>
  
  <p>I am using below codes in <em><code>.html</code> file and not in WordPress environment</em>.</p>
  
  <p>==== <strong>Angular JS Script</strong> ====</p>
  
  <pre><code>(function() {
      var app = angular.module('tsApp', []);
      app.controller('TSController', function($scope, $http) {
          $scope.heading = [];
          $http({
              method: 'GET',
              url: 'http://teckstack.com/api/get_recent_posts'
          }).success(function(data) {
              console.log("pass");
              $scope.heading = data; // response data 
          }).error(function(data) {
              console.log("failed");
          });
      });
  })();
  </code></pre>
  
  <p>==== <strong>HTML</strong> ====</p>
  
  <pre><code>&lt;html ng-app="tsApp"&gt;
  &lt;body ng-controller="TSController as tsCtrl"&gt;
          &lt;article class="main-content" role="main"&gt;
              &lt;section class="row"&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="name-list"&gt;
                          &lt;h1&gt;Dummy Title&lt;/h1&gt;
                          &lt;ul&gt;{{ 1+1 }} (Testing AJS is working)
                              &lt;li ng-repeat="title in heading" class=""&gt;
                                  &lt;h3&gt;{{title.Name}}&lt;/h3&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/article&gt;
          &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am raising this question after checking for all solution online
  <a href="https://stackoverflow.com/a/26898082/1841647">https://stackoverflow.com/a/26898082/1841647</a> and
  <a href="http://www.ivivelabs.com/blog/fix-cross-domain-ajax-request-angularjs-cors/" rel="nofollow noreferrer">http://www.ivivelabs.com/blog/fix-cross-domain-ajax-request-angularjs-cors/</a>
  But nothing worked for me.</p>
  
  <p>Creating JSFiddle for your convenience:
  <a href="http://jsfiddle.net/236gdLnt/" rel="nofollow noreferrer">http://jsfiddle.net/236gdLnt/</a></p>