Accessing $scope date inside a http.get callback

Question

I need to store the data returned by $http.get in a $scope variable to be used by my ui-grid control.

I´m sure I´m missing something very simple, but I can´t find out what. Here is my code:

app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) {

    $http.get('/api/admin/user')
    .success(function (response, $scope) {
        $scope.myData = response;
    })
    .error(function (error) {
        console.log(error);
    });

    console.log($scope.myData);

    $scope.gridOptions = {
      data: 'myData',
      enableFiltering: true,
      columnDefs: [
        { field: 'firstName' },
        { field: 'lastName' },
        { field: 'jobTitle'},
        {
          field: 'email',
          filter: {
            condition: uiGridConstants.filter.ENDS_WITH,
            placeholder: 'ends with'
          }
        },
        {
          field: 'phone',
          filter: {
            condition: function(searchTerm, cellValue) {
              var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
              return strippedValue.indexOf(searchTerm) >= 0;
            }
          }
        },
      ]
    };        

  });

My console inside success prints undefined . How can I access the original $scope inside the $http.get success function ?

Answer 1

My console inside success prints undefined

But, your console is NOT inside the success method. This is inside:

$http.get('/api/admin/user')
.success(function (response) {
    $scope.myData = response;
    console.log($scope.myData);
})
.error(function (error) {
    console.log(error);
});

This is not:

// order of events..
// #1...first $http
$http.get('/api/admin/user')
.success(function (response) {
    //... #3 third. Now finally response is defined. the end
    $scope.myData = response;
})
.error(function (error) {
    console.log(error);
});

//... #2 second. $scope.myData definitely IS undefined
console.log($scope.myData);

Huge difference. There is also no need to include $scope in your success callback. I've never seen that before. Where did you get that from?

Answer 2

When is a server call is better if you use a service in an external file, but well, in your case, the $scope does not have the response because the code is executed before the service finished, try using a $timeout or something like this:

app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) {

$http.get('/api/admin/user').success(function (response) {
    $scope.myData = response;
    fillGridOptions();
}).error(function (error) {
    console.log(error);
});

function fillGridOptions() {
$scope.gridOptions = {
    data: 'myData',
    enableFiltering: true,
    columnDefs: [
      { field: 'firstName' },
      { field: 'lastName' },
      { field: 'jobTitle' },
      {
          field: 'email',
          filter: {
              condition: uiGridConstants.filter.ENDS_WITH,
              placeholder: 'ends with'
          }
      },
      {
          field: 'phone',
          filter: {
              condition: function (searchTerm, cellValue) {
                  var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
                  return strippedValue.indexOf(searchTerm) >= 0;
              }
          }
      },
    ]
};

}

});