Restangular does not PUT full object

Question

I'm very new to it all so if I've made some massive oversights don't shout to hard.

I'm trying to update a table row using restangular. However it would seem like not all the object data is being set to the restapi. I have tested the restapi with POSTMAN so I know that works and I have also created new objects.

With google dev tools the PUT completes 200 OK but the Requested Payload only has the ID of the row. Actually if I attempt this on an existing row with data it clears all the data but the ID!

So here is what I have:

The HTML:

<div ng-controller="networksController">
<h1>{{title}}</h1>

<input type="text" ng-model="search" class="search-query" placeholder="Search">

<table class="table table-striped">
    <thead>
        <th>ID</th>
        <th>Title</th>
        <th>Reason</th>
        <th>Actions</th>
        <th>Requester</th>
        <th>Verified</th>
        <th></th>
    </thead>
    <tbody>
        <tr ng-repeat="change in changes | filter:search">
            <td>{{ change._id }}</td>
            <td>
                <div class="animate-show" ng-hide="editorEnabled">{{ change.title }}</div>
                <div class="animate-show" ng-show="editorEnabled">
                    <input class="animate-input" type="text" ng-model="change.title" />
                </div>
            </td>
            <td>
                <div class="animate-show" ng-hide="editorEnabled">{{ change.reason }}</div>
                <div class="animate-show" ng-show="editorEnabled">
                    <input class="animate-input" type="text" ng-model="change.reason" />
                </div>
            </td>
            <td>
                <div class="animate-show" ng-hide="editorEnabled">{{ change.actions }}</div>
                <div class="animate-show" ng-show="editorEnabled">
                    <input class="animate-input " type="text" ng-model="change.actions" />
                </div>
            </td>
            <td>
                <div class="animate-show" ng-hide="editorEnabled">{{ change.requester }}</div>
                <div class="animate-show" ng-show="editorEnabled">
                    <input class="animate-input" type="text" ng-model="change.requester" />
                </div>
            </td>
            <td>
                <div class="animate-show" ng-hide="editorEnabled">{{ change.verified }}</div>
                <div class="animate-show" ng-show="editorEnabled">
                    <input class="animate-input" type="text" ng-model="change.verified" />
                </div>
            </td>
            <td>
                <input type="button" value="Edit" ng-hide="editorEnabled" ng-click="editorEnabled=!editorEnabled" />
                <input type="button" value="Save" ng-show="editorEnabled" ng-click="editorEnabled=!editorEnabled; save(change)" />
                <button ng-click="destroy(change)">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

The Main Controller:

var app = angular.module('richApp', ['ngResource', 'ngAnimate', 'restangular', 'xeditable'])
.config(function(RestangularProvider) {
            RestangularProvider.setBaseUrl('api/');
        });

The Page Controller:

app.controller('networksController', ['$scope', '$resource', 'Restangular', function($scope, $resource, Restangular) {

    $scope.title = 'Network Control APP';

    var baseChanges = Restangular.all('changes');

    baseChanges.getList().then(function(changes) {
        $scope.allChanges = changes;
    });

    $scope.changes = Restangular.all('changes').getList().$object;

    $scope.destroy = function(change) {
        Restangular.one("changes", change._id).remove();
    };

    $scope.save = function(change) {
        Restangular.one("changes", change._id).put();
    };

}]);

Answer 1

Ok so after 3 days of hunting high and low I finally find the answer. Mongo and restangular use different ID Keys. mongo uses _id whereas restangular uses id.

In order to correct this I needed to add the following

var app = angular.module('richApp', ['ngResource', 'ngAnimate', 'restangular', 'xeditable'])

.config(function(RestangularProvider) {
    RestangularProvider.setBaseUrl('api/');
    RestangularProvider.setRestangularFields({ //Added this
      id: "_id"                                //Added this
    });                                        //Added this
});

It's fair to say I also modified the following:

$scope.save = function(change) {
         Restangular.one("changes", change._id).get().then(function(data) {
            $scope.data = data;

        });

        var original = change;
        $scope.data = Restangular.copy(original);
        $scope.data.save();
    };

Answer 2

I think you should use

$scope.save = function(change) {
    change.put();
};