JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="MyApp">

    <div ng-controller="ArqCtrl">
        <ul>
            <li ng-repeat="country in countries">

                {{ country.name + ',' + country.capital + ',' + country.bd + ',' + country.pop }}
            </li>
        </ul>
    </div>
</body>

JavaScript

var app = angular.module('MyApp', []);

app.controller('ArqCtrl', ["$scope", "$http", "RequestAddress",function($scope, $http, RequestAddress) {

   var params = {
     param: '[{ "name":"United States","capital":"Washington, D.C.","pop":321645000,"latlng":[38.0,-97.0],"bd":["CAN","MEX"]}]'
    }
    
    RequestAddress.getAddress(params)
    .then(function(rtn) {
         $scope.countries = rtn;
    });
          
   }]);
        
app.service('RequestAddress',["$http", 
    function($http) {
    
      this.getAddress = function(data) {
      
      var url = '/echo/json/?rand='+randUrl();
       var dataParam = {
                    'json': data.param
                  };

                var request = $http({
                    method: "post",
                    url: url,
                    data: dataParam
                });

          return request.then( _handleSuccess, _handleFail );
      
      }
   
   
     function _handleFail(response) {
        console.log(response);
     }

     function _handleSuccess(response) {

         if ($http.pendingRequests.length === 0){
              console.log('Loading...', response)
         }
          return JSON.parse(response.config.data.json);

    }
    
    function randUrl() {
       return Math.floor((Math.random() * 100) + new Date().getTime())
    }
    
}]);