JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <div ng-repeat="country in countries | myFilter:'A'">
            <p>Сокращение: {{country.code}}</p>
            <p>Полное название: {{country.name}}</p>
            <p>Население: {{country.population}}</p>
        </div>
    </div>
</div>

CSS

div{
    border: 1px solid grey;
}

JavaScript

;!(function (angular) {
    angular.module('myApp', [])
    .filter('myFilter', function () {
        return function (array, letter) {
        		console.log(letter)
        		var re = new RegExp("^" + letter)
            return array.filter(function (item) {
                return re.test(item.code); 
            });
        };
    })
    .controller('myController', ['$scope',
         function ($scope) {
             $scope.countries = [
                 {
                  "code": "AD",
                  "name": "Andorra",
                  "population": "84000"
                },
                {
                  "code": "AF",
                  "name": "Afghanistan",
                  "population": "29121286"
                }, 
                {
                  "code": "BA",
                  "name": "Bosnia and Herzegovina",
                  "population": "4590000"
                },
                {
                  "code": "BB",
                  "name": "Barbados",
                  "population": "285653"
                },
             ];
         }]);
})(angular)