JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<!-- This is WordPress template -->
<div ng-app="ngAppStrictDemo">
  <div ng-controller="SearchController">
    Search Results:
    <ul class="search-results">
      <!-- Search results will show up here when AJAX is done, otherwise its empty -->
      <li class="search-result" ng-repeat="singleResult in searchResults">
        <h2>{{singleResult.post_title}}</h2>
        <p>{{singleResult.post_content}}</p>
      </li>
    </ul>

  </div>
</div>

JavaScript

console.clear();

angular.module('ngAppStrictDemo', [])
  .controller('SearchController', ['$scope', '$http',
    function($scope, $http, $templateCache) {

      $scope.searchResults = null;

      $http({
        method: 'GET',
        url: 'https://gist.githubusercontent.com/andypotanin/b29043e43e407eb273bc79725d01ea5f/raw'
      }).
      then(function(response) {
        $scope.searchResults = response.data.data;
      }).catch(function(response) {
        console.log('have error', response.status);
        $scope.searchResults = [];
      });

    }
  ]);