Angularjs动态表单添加输入

Question

Button "(+) Add input"非常适合创建新输入。 但是，每当我调用"(+) Add new group"时，后续组将基于Group 1的对象。我如何使它独立，以便它作为默认的一个输入开始。此外，后续组"(+) Add input"将无效。

PS，我试过通过plunker但我不能让它工作。

HTML

            <f-col class="medium-12 large-12">
                <f-row class="content first-content-row">
                    <f-fieldset data-ng-repeat="p in priority">
                        <legend>
                            <p>Group {{p.id}}</p>
                        </legend>

                        <f-row>
                            <f-fieldset style="border:none;" data-ng-repeat="acc in familyAttributes">



                                <div class="medium-12 large-12 columns" ng-show="{{acc.id}} !== 1">
                                </div>

                                <f-form-label class="medium-2 large-2">Family<span style="color:red"> *</span></f-form-label>
                                <f-col class="medium-2 large-2">
                                    <select name="family{{acc.id}}" ng-model="acc.family" >
                                        <option value="">Select an option</option>-->
                                        <option value="mother">Mother</option>
                                        <option value="dad">Dad</option>
                                        <option value="son">Son</option>
                                    </select>

                                </f-col>
                            </f-fieldset>
                        </f-row>

                        <f-row>
                            <f-col columns="large-12">
                                <f-button-group class="float-right">
                                    <f-button ng-click="addAdditionalAcc(p.id)">(+) Add input</f-button>
                                </f-button-group>
                            </f-col>
                        </f-row>



                    </f-fieldset>
                </f-row>


                    <f-row>
                        <f-col columns="large-12">
                            <f-button-group>
                                <f-button class="alert" ng-click="removeAdditionalPriority()">(-) Delete Last group</f-button>
                                <f-button ng-click="addAdditionalPriority()">(+) Add new group</f-button>
                            </f-button-group>
                        </f-col>
                    </f-row>
                    <hr>

                </f-row>
            </f-col>
        </f-col>
    </f-row>


</form>

JS FILE

$scope.familyAttributes = [{id: 1}]

        $scope.priority = [{id: 1, familyAttributes:  $scope.familyAttributes}];


        // ADDING OF ADDITIONAL INPUT
        $scope.addAdditionalAcc = function(number) {
            //$scope.familyAttributes.push({'id':newItemNo});
            console.log('take invalue' + number);
            for(var i in $scope.priority) {

                if(i+1 == number) {
                    console.log('priority id' + $scope.priority[i].id);
                    var newItemNo = $scope.priority[i].familyAttributes.length+1;
                    console.log(newItemNo);
                    $scope.priority[i].familyAttributes.push({'id':newItemNo} );
                    console.log("Yes");
                }
                else {
                    console.log('nope');
                }
            }
        };


        // ADD && REMOVE NEW GROUP
        $scope.addAdditionalPriority = function() {

            var newItemNo = $scope.priority.length+1;
            console.log($scope.familyAttributes + newItemNo);
            //$scope.familyAttributes = [{id: 1}];
            $scope.priority.push({'id': newItemNo, 'familyAttributes': $scope.familyAttributes});
            console.log($scope.priority);
        };

        $scope.removeAdditionalPriority = function() {
            var lastItem = $scope.priority.length-1;
            $scope.priority.splice(lastItem);
        };