Accessing a controller from inside a callback function in AngularJS

Question

I have the following AngularJS controller:

controllers.controller('QueuesCtrl', ['$scope', 'QueueRes',function($scope,QueueRes) {

    $scope.queues = QueueRes.query();
    this.queue={};

    this.create = function() {
        QueueRes.save(this.queue,function(){
            this.queue={};
        })

    };

  }]);

The object this.queue is a form, that I want to reset after I successfully POST the data. The this.queue={}; inside of the callback function doesn't work (which makes sense since this is different in that context). If I move this.queue={}; to outside of the callback, my code works, but resets the password regardless of the outcome of the POST operation, which is not what I desire.

How can I access the controller from inside the callback ?

Answer 1

this (controller object reference) is different from $scope (view model bound to html template).

If you want to reset queue on $scope, you can directly use

$scope.queue = {};

Otherwise, you can store this in a variable and use that variable to set queue.

controllers.controller('QueuesCtrl', ['$scope', 'QueueRes',function($scope,QueueRes) {
    var me = this;

    $scope.queues = QueueRes.query();
    me.queue={};
    this.create = function() {
        QueueRes.save(this.queue,function(){
            me.queue={};
        })
    };
  }]);