JSFiddle - React, Tailwind, and code Playground

by Siddharth Jain

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script>
var app = angular.module('myApp', ['angular.filter']);
app.controller('myCountries', function($scope) {
    $scope.field=[{
		"country": "Australia",
		"type": "Free"
	}, {
		"country": "Australia",
		"type": "Pay"
	}, {
		"country": "Australia",
		"type": "Not Pay"
	}, {
		"country": "India",
		"type": "Free"
	}, {
		"country": "India",
		"type": "Not Pay"
	}, {
		"country": "United States",
		"type": "free"
	}];
  
  
  $scope.list=[{
  		'id':1,
      'field':[{
		"country": "Australia",
		"type": "Free"
	}, {
		"country": "Australia",
		"type": "Pay"
	}, {
		"country": "Australia",
		"type": "Not Pay"
	}, {
		"country": "India",
		"type": "Free"
	}, {
		"country": "India",
		"type": "Not Pay"
	}, {
		"country": "United States",
		"type": "free"
	}]
  },
  
  {
  		'id':2,
      'field':[{
		"country": "Australia",
		"type": "Free"
	}, {
		"country": "Australia",
		"type": "Pay"
	}, {
		"country": "Australia",
		"type": "Not Pay"
	}, {
		"country": "India",
		"type": "Free"
	}, {
		"country": "India",
		"type": "Not Pay"
	}, {
		"country": "United States",
		"type": "free"
	}]
  },
  {
  		'id':3,
      'field':[{
		"country": "Australia",
		"type": "Free"
	}, {
		"country": "Australia",
		"type": "Pay"
	}, {
		"country": "Australia",
		"type": "Not Pay"
	}, {
		"country": "India",
		"type": "Free"
	}, {
		"country": "India",
		"type": "Not Pay"
	}, {
		"country": "United States",
		"type": "free"
	}]
  }
  
  
  
  
  ]
  $scope.b=23;
  console.log(121);
});

</script>
<div ng-app="myApp" ng-controller="myCountries">
<ul>
<li ng-repeat="(key, value) in field|groupBy: 'type'"></li>
  {{ key }}
  <li ng-repeat="country in value">
    : {{ country.country }} 
  </li>
</ul>
</div>