Get editable row of data from angular and sending it to WEB api

Question

1. How do I send to the 'save' event the complete object including what ever the user has typed in that row? For now, those 2 fields are always NULL no matter what I do.

2. (the temp comment) Where do I put this? I want to get the item data when the 'save' is clicked but I if I put it in there how do I refer to the specific row?

The example I started with used separate pages for list/edit so the problem I am having is how to combine the functionality into one page.

var ListCtrl = function($scope, $location, Msa) {
    $scope.items = Msa.query();

    //temp: since I do not know how to get the value for specific row
    var id = 1;
    $scope.msa = Msa.get({id: id});

    $scope.save = function() {
        Msa.update({id: id}, $scope.msa, function() {
            $location.path('/');
        });
    }
};

<tbody>
    <tr ng-repeat="msa in items">
        <td>{{msa.PlaceId}}</td>
        <td>{{msa.Name}}</td>
        <td>
            <div class="controls">
                <input type="text" ng-model="msa.PreviousPlaceId" id="PreviousPlaceId">
            </div>
        </td>
        <td>
            <div class="controls">
                <input type="text" ng-model="msa.NextPlaceId" id="NextPlaceId">
            </div>
        </td>
        <td>
            <div class="form-actions">
                <button ng-click="save()" class="btn btn-primary">
                    Update
                </button><i class="icon-save"></i>
            </div>
        </td>
    </tr>
</tbody>      

Answer 1

It looks like it's in an ng-repeat so your scope isn't the same in the controller as in the ng-repeat.

I think you can just send in the current msa element from items and then in the save method, loop through the original list matching the element that's sent in and then update the fields.

<button ng-click="save(msa)" class="btn btn-primary">