Angular refresh list after post using Django-Rest-Framework

Question

I've been looking on the forum how to update a list of items after the post using a server. The available examples show how to update the list but in memory. This is my current code:

$http.get('job/').
    success(function(data, status, headers, config) {
        $scope.jobs = data;
    }).
    error(function(data, status, headers, config) {
        console.log('Error', status);
    });

$scope.save = function(job) {
    $http.post('job/', job)
        .success(function(data) {
            $scope.jobs.push(data); // here i trying update the list in view
        }).
         error(function(data, status, headers, config) {
            console.log('Error', status);
        });
};

// HTML List
<tr ng-repeat="job in jobs">
    {% verbatim %}
      <td> {{ job.name }}</td>
      <td>{{ job.description }}</td>
    {% endverbatim %}
      <td><a ng-click="edit(job.id)" class="btn btn-small btn-primary">edit</a></td>
      <td><a ng-click="delete(job.id)" class="btn btn-small btn-danger">delete</a></td>
</tr>

// HTML form
<div class="span6" ng-controller="JobCtrl">
<h5>Create a New Job</h5>
    <form class="form-inline">
        <div class="form-group block-level">
            <input type="text" class="form-control" name="name" ng-model="job.name" placeholder="Name">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="description" ng-model="job.description" placeholder="Description">
        </div>
        <div class="form-group">
            <button class="btn btn-default" ng-click="save(job)">Add Job</button>
        </div>
    </form>
</div>

Thanks!

Answer 1

Solved using Observer.

myApp.service('JobService', function($http) {

var observerCallbacks = [];

// register the observer's callback in our callback list.
this.registerObserverCallback = function(callback){
  observerCallbacks.push(callback);
};

// function to notify our observers and call the callback they registered with
var notifyObservers = function(){
  angular.forEach(observerCallbacks, function(callback){
   callback();
 });
};

this.list = function() {
    return $http.get('job/').
        success(function(data) {
            return data;
        });
};

this.add = function(job) {
    return $http.post('job/', job).success(function(data, status, headers, config) {
        notifyObservers();
    });
};


});


myApp.controller('JobCtrl', function ($scope, $http, $location, JobService) {
    var getList = function() {
        JobService.list().then(function(jobs){
            $scope.jobs = jobs.data;
        });
    };

    JobService.registerObserverCallback(getList);
    getList();

    $scope.save = function(job) {
        JobService.add(job).success(function(data) {
            $scope.job = '';
            console.log('success!');
        });
    };
});

Answer 2

Here is the working solution (without BE communication). I think your code is fine, because it's working here, but I think you miss table tag around tr and td

http://jsfiddle.net/U3pVM/5031/

      <table>
<tr ng-repeat="job in jobs">
      <td> {{ job.name }}</td>
      <td>{{ job.description }}</td>
      <td><a ng-click="edit(job.id)" class="btn btn-small btn-primary">edit</a></td>
      <td><a ng-click="delete(job.id)" class="btn btn-small btn-danger">delete</a></td>
</tr>
      </table>

You don't have to do any $scope.$apply, because you are already working within angular scope (ng-click and $http backend request are that)