How to update Angular model with $http response?

Question

I'm building an http request in Angular using $http and trying to update a model located in '$scope' with the data return in the response. When I receive the response from my node backend, I'm setting '$scope.data = data;' within the success callback. When I step through the javascript, I can see that the response is correct and the status code is present. Here's a sample of what I'm trying to do:

angular.module("Sample").controller('MainCtrl', ['$http', '$scope', function($http, $scope) {

this.testcall = function (url) {

  $http.post(url).success(function (data, status) {
    console.log(data);
    $scope.data = data;
    $scope.status = status;
    console.log($scope.data);
  }).error(function (data, status) {
    console.log('failed');
    $scope.response = 'failed call';
    $scope.status = status;
  });
};
}

And in my html template I have the controller set in the div and I'm trying to display that response.

<div ng-controller="MainCtrl as main">
  {{data}}
</div>

I can set a value to data and have it appear on load, but when the value changes it's not being redrawn. It was my understanding that '$http' causes '$digest' to be called which should redrawn any modified models.

Answer 1

To get it working you need to bind scope variable to controller this context write this.data = data; instead of $scope.data because you are using controllerAs syntax.

Code

  $http.post(url).success(function (data, status) {
    console.log(data);
    this.data = data;
    this.status = status;
    console.log(this.data);
  }).error(function (data, status) {
    console.log('failed');
    this.response = 'failed call';
    this.status = status;
  });

Markup

<div ng-controller="MainCtrl as main">
  {{main.data}}
</div>