Ndtyjky

I was worked simple web application using asp.net web api and angularjs (javascript). In this app I have one master grid, and when I click on button inside row, then the modal dialog will be opened. Modal dialog containd detail grid (table) which have many items. See following picture:

Each items in his data contains parentId. In my case each detail grid item contains id = 1, which we can see in the next picture:

This solution (when I click 'plus' button) working fine (only Kolicina field can make change). But, we must click row by row plus button for save all changes. My question is, how can implement functionality, in which we will have only one button in modal dialog for save all row changes. I assume that array (with all item changes) should be forwarded to the web api controller method.
Thanks for any useful information.

EDIT
My html modal looks like:

<div id="vipZaglavljeModal" class="modal fade" tabindex="-1" role="dialog">

<div class="modal-dialog" role="document">

    <div class="modal-content" style="overflow:scroll;max-height:700px;width:750px;">

        <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

            <h4 class="modal-title">VIP Stavke</h4>

        </div>

        <div class="modal-body">

            <table id="myTableModal" class="table table-bordered table-condensed">

                <thead>

                    <tr>

                        <th style="padding-left:15px;font-size:medium;">Id</th>

                        <th style="font-size:medium">Sifra</th>

                        <th style="font-size:medium">Naziv</th>

                        <th style="font-size:medium">Kolicina</th>

                        <th style="font-size:medium;width:70px;">Prodavnica</th>

                        <th style="font-size:medium">***</th>

                    </tr>

                </thead>

                <tbody>

                    <tr ng-repeat="stavka in stavke track by $index">

                        <td style="padding-left:15px;font-size:medium;padding-top:12px;">{{stavka.Id}}</td>

                        <td style="font-size:medium;padding-top:12px;">{{stavka.Sifra}}</td>

                        <td style="font-size:medium;padding-top:12px;">{{stavka.Naziv}}</td>

                        <td style="font-size:medium;padding-top:12px;"><input type="text" class="form-control" ng-model="stavka.Kolicina" style="width:70px;margin-top:-5px;"/></td><!--ng-class="{ nakonStoKliknesSave: kliknutoNaSave[$index] }"-->

                        <td style="font-size:medium;padding-top:12px;">{{stavka.Prodavnica}}</td>

                        <td style="font-size:medium;padding-top:12px;"><button ng-click="vipZaglavljePut(stavka.Id, stavka)" ng-disabled="((formatDateScope(stavka.VIPZaglavlje.Pocetak) < trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) < trenutniDatumIVrijeme) || (formatDateScope(stavka.VIPZaglavlje.Pocetak) > trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) > trenutniDatumIVrijeme) || (formatDateScope(stavka.VIPZaglavlje.Pocetak) > trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) < trenutniDatumIVrijeme))" class="btn btn-primary" style="margin-top:-5px">+</button></td>

                    </tr>

                </tbody>

            </table>

        </div>

        <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal" style="font-size:medium">OK</button>

            <!--<button type="button" class="btn btn-primary" ng-click="osnovnaSredstvaDelete()" style="font-size:medium">Da</button>-->

        </div>

    </div><!-- /.modal-content -->

</div><!-- /.modal-dialog -->

Do i understand correctly - you want to have only one button for save all datas from table. You can add a checkboxes in each row of table and in the top add button which sums all checked datas and send them on
HTML :

   <table id="myTableModal" class="table table-bordered table-condensed">

                <thead>

                    <tr>

                        <th style="padding-left:15px;font-size:medium;">Id</th>

                        <th style="font-size:medium">Sifra</th>

                        <th style="font-size:medium">Naziv</th>

                        <th style="font-size:medium">Kolicina</th>

                        <th style="font-size:medium;width:70px;">Prodavnica</th>

                        <th style="font-size:medium">***</th>

                    </tr>

                </thead>

                <tbody>

                    <tr ng-repeat="stavka in stavke track by $index">

                        <td style="padding-left:15px;font-size:medium;padding-top:12px;">{{stavka.Id}}</td>

                        <td style="font-size:medium;padding-top:12px;">{{stavka.Sifra}}</td>

                        <td style="font-size:medium;padding-top:12px;">{{stavka.Naziv}}</td>

                        <td style="font-size:medium;padding-top:12px;"><input type="text" class="form-control" ng-model="stavka.Kolicina" style="width:70px;margin-top:-5px;"/></td><!--ng-class="{ nakonStoKliknesSave: kliknutoNaSave[$index] }"-->

                        <td style="font-size:medium;padding-top:12px;">{{stavka.Prodavnica}}</td>

                        <td style="font-size:medium;padding-top:12px;"> <button class="btn" ng-click="vipZaglavljePut(stavka)">+</button></td>

                    </tr>

                </tbody>

            </table>

        </div>

 <div ng-if="Kolicina">{{id}} : {{Kolicina}}</div>

JS:

    $scope.vipZaglavljePut = function (stavka){

          console.log(stavka.Kolicina);

          $scope.id = stavka.Id;

          $scope.Kolicina = stavka.Kolicina;

}

Here is plunker : http://plnkr.co/edit/h1Jao3YfbFCd2n33bQtk?p=preview