JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<html ng-app>
    <div ng-controller="ctrl">
        <p>Project :</p> <pre>{{project |json}}</pre>

        <div ng-repeat="user in project">
            <select ng-model="user.securityId" ng-options="w.securityId as w.securityRoleName for w in SecurityRoles"></select>
            <select ng-model="user.personId" ng-options="w.personId as w.personName for w in Persons"></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.project = [];

    $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.project.push({});
    }

    $scope.remove = function ($index) {

        $scope.project.splice($index, 1);
    }




}