JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app>
    <div ng-controller="ctrl">
        <p>Project :</p> <pre>{{additionals | json}}</pre>
        <div ng-repeat="additional in additionals">
            <select ng-model="additional.securityId"  
                    ng-options="w.securityId as w.securityRoleName for w in SecurityRoles">
            </select>
        
            <select ng-model="additional.personId"  
                    ng-options="w.personId as w.personName for w in Persons | filter:{contactId: additional.securityId}">
            </select>
            <button ng-click="remove($index)">remove</button>
        </div>
        <button ng-click="add()">add row</button>
    </div>
</html>

JavaScript

function ctrl($scope) {
        $scope.additionals=[{}];
        $scope.SecurityRoles = [{
            securityId: 1,
            securityRoleName: "SuperAdmin"
        }, {
            securityId: 2,
            securityRoleName: "Admin"
        }, {
            securityId: 3,
            securityRoleName: "Guest"
        }];
        
        $scope.Persons = [{
            personId: 1,
            contactId:1,
            personName: "john"
        }, {
            personId: 2,
            contactId:1,
            personName: "jack"
        },{ personId: 3,
            contactId:2,
            personName: "Johnson"
        },{ personId: 4,
            contactId:2,
            personName: "rock"
        },{ personId: 5,
            contactId:3,
            personName: "bank"
        }];

        $scope.add = function() {
            $scope.additionals.push({});
        };
        
        $scope.remove=function($index){
            $scope.additionals.splice($index,1);
        };
    }