How to get this AngularJS controller working ($scope variable not getting initialized in controller)?

Question

var myApp = angular.module('myRealApp',[]);

   myApp.controller('myController',function($scope,$http){
   "use-strict";

   $scope.content = [];

   $scope.fetchContent = function () {
    $http({
         method : 'POST',
         ContentType : "application/json",
         url : "http://localhost:8080/myUrl",
         headers : { 'Content-Type' : 'application/json'}   
    })
    .success(function(response){
         $scope.content = response;
         console.log($scope.content); //Shows the returned object from server

    });
   }

   $scope.fetchContent();
   console.log($scope.content); //Shows as []
}                   

When I load page, $scope.fetchContent gets called and gets the data from the server, also assigns it to $scope.content. But, when I access $scope.content outside this function, it still shows it's value as []. What wrong I am doing here ?

Data returned from server is a list of objects. (ArrayList of Java to JSON array).

Answer 1

$http is asynchronous. The order of your process is like this:

-> fetchContent()
-> console.log($scope.content) // outside of your $http
-> $http.success

The content will be shown in your html template anyway because angular is watching your scope, so dont be worry about that. If you want to run another process after fetching data, call the function in your success callback function

Answer 2

$http create a promise that will be resolved when the ajax call to http://localhost:8080/myUrl is resolved. When the browser arrive at the line console.log($scope.content); (few lines after the promise has been created) the promise isn't resolved yet.

If you want to do stuff (like a console.log) when your promise is resolved outside of the .success() you have to get the promise and use a .then() on the promise $http has created like this :

"use-strict";
var myApp = angular.module('myRealApp',[]);

myApp.controller('myController',function($scope,$http){

    $scope.content = [];

    $scope.fetchContent = function () {
       return $http({ //line changed
           method : 'POST',
           ContentType : "application/json",
           url : "http://localhost:8080/myUrl",
           headers : { 'Content-Type' : 'application/json'}   
       });
   }

    var promise = $scope.fetchContent();
    promise.then(function() { //line changed
        console.log($scope.content);
    });
}

• side note: You should put the "use-strict"; line on top of your file
• side-note²: Beware that creating your controller like this : myApp.controller('myController', function($scope,$http) { ... }) will create error when minifying prefer the redondant version : myApp.controller('myController', ["$scope", "$http", function($scope,$http) { ... }])