JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="account-form-client-de" ng-controller="AppCtrl as appCtrl">
<new-tax-country
    ng-repeat="newItem in data.company.extraTaxCountries track by $index" 
    ng-model="data.company.extraTaxCountries[$index]">
</new-tax-country>
<button ng-click="addTaxCountry();">
add tax country
</button>
<div ng-repeat="newItem in data.company.extraTaxCountries track by $index">{{newItem.a}}
</div>
</div>

JavaScript

(function() {
    angular
        .module('account-form-client-de', []);

    angular
        .module('account-form-client-de')
        .controller('AppCtrl', ['$scope', function ($scope) {
            $scope.data = { company: { extraTaxCountries: [{a:'1'}, {a:'2'}] } };
            $scope.addTaxCountry = function() {
               $scope.data.company.extraTaxCountries.push({});
            }
        }]);


    angular.module('account-form-client-de')
        .directive("newTaxCountry", [function(Countries) {
            function link(scope, element, attrs, controller, $parent) {
                scope.ngModel.a = scope.ngModel.a ? scope.ngModel.a++ : 1;
            }
            
            var options = {
                restrict: 'E',
                require: 'ngModel',
                replace: true,
                scope: { ngModel : '=' },
                link: link,
                template: '<div class="newtaxcountry"><label for="new_taxid">bla</label><input name="new_taxid" ng-model="newTaxInnerScope.new_taxid">{{ngModel}}</div>'
            };

            return options;
        }]);
})();