Data doesn't bind when submitting form

Question

Data doesn't bind when submitting form

When I refresh the page the correct values come up. I want the list of 'gists' to automatically update when the form is submitted.

The global @todone is set that way because I receive an undefined error when I set it as 'todone'. It may be unrelated.

app.factory "To_done", ["$resource", ($resource) ->
   $resource("/to_dones", {}, {update: {method: "PUT"}})
]

@MainCtrl = ["$scope", "To_done", ($scope, To_done) ->
  $scope.to_dones = To_done.query()

  $scope.addTodone = ->
    @todone = To_done.save($scope.newTodone)
    $scope.to_dones.push(@todone)
    $scope.newTodone = {}
]


<div ng-controller="MainCtrl">
  <form ng-submit="addTodone()">
    <input type="text" ng-model="newTodone.gist">
    <input type="submit" value="Add">
  </form>
  <ul>
    <li ng-repeat="todone in to_dones">
        {{todone.gist}}
    </li>
  </ul>
</div>

javascript
angularjs
coffeescript
angularjs-scope

Answer 1

To_done.save($scope.newTodone) is asynchronous. You need to register a callback function to get the value returned by your POST.

var todone = To_done.save($scope.newTodone, function() {
   //success callback - optional
   $scope.to_dones.push(todone);
}, function() {
   //error callback - optional
});
$scope.newTodone = {};

You can add arguments to the callback methods if you need more informations about the answer received from your service. More details here : http://docs.angularjs.org/api/ngResource.$resource