the form doesn't send updated input value

Question

On my page I have bs-table. The data comes from api call. By click on row I send new api call to retrieve row data from db. Then I set scope variable for res data and render it on a page

$('#table').on('click-row.bs.table', function (e, row, $element) {

                $('.success').removeClass('success');
                $($element).addClass('success');

                var indexId = $table.find($element).data('index');
                var rowData = $table.bootstrapTable('getData')[indexId];
                $scope.id = rowData.id;

                $http.get(url + $scope.id)
                        .then(function (res) {
                            $scope.rowData = res.data.model;
                            console.log($scope.rowData);
                            $scope.rowKeys = Object.keys($scope.rowData);
                        });
                $scope.$apply();

            });

html:

<form style="padding: 15px" ng-submit="submitForm()">
        <div class="form-group row">
               <div ng-repeat="k in rowKeys | filter: '!id'" ng-model="rowValue">
               <label for="rowValue"  class="col-sm-2">
               <!--{{k | hide:'.name'}}:-->
               {{k }}:
               </label>
               <div class=" col-sm-2">
               <input class="form-control rowValue"  id="rowValue"  value="{{rowData[k]}}"/>
               </div>
          </div>
    </div>
   <button type="submit" class="btn btn-default" ng-if="rowData" >Submit</button>

Then thru ng-submit I want to send back changes which have been made in that form

 $scope.submitForm = function() {

        $scope.$watch('rowData', function(newValue, oldValue) {
                console.log('being watched oldValue:', oldValue, 'newValue:', newValue);
            }, true);

        $http({
            method  : 'PUT',
            url     : url + $scope.id,
            data    : $scope.rowData, //form
            headers : {'Content-Type': 'application/json'}
        })
        .then(function (res) {
                //console.log(res);
                //console.log($scope.rowData);
                return res;
            });
    };

As you can see I've set $watch that to follow for changes in scope variable, but the problem is the console log returns same values for oldValue and newValue. Could anybody explain me where is my mistake? I appreciate any help

Answer 1

You're not binding the values to anything. Instead of using value="{{rowData[k]}}" on your input element, use ng-model: ng-model="rowData[k]" .

Answer 2

You're calling $scope.$apply(); before the request has a chance to finish. You need to put $scope.$apply(); within the then() callback.

$http.get('stuff').then(function(response){
    //stuff
    $scope.$apply();
});