AngularJS - understanding scopes

Question

I'm confused, I have this module which routes to different controllers:

var mainModule = angular.module('lpConnect', []).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/home', {template:'views/home.html', controller:HomeCtrl}).
        when('/admin', {template:'views/admin.html', controller:AdminCtrl}).
        when('/connect', {template:'views/fb_connect.html', controller:MainAppCtrl}).
        otherwise({redirectTo:'/connect'});
}]);

and a Common service like so:

mainModule.factory('Common', ['$rootScope', '$http', function (scope, http) {
        var methods = {
            changeLanguage:function (langID) {
                http.get('JSON/langs/' + langID + '/captions.json').success(function (data) {
                    scope.lang = data;
                });
            },
            initChat:function () {
                console.log(scope); // full object
                console.log(scope.settings); // undefined
            }
        };

        //initiate
        http.get('JSON/settings/settings.json').success(function (data) {
            scope.settings = data;
            methods.changeLanguage(scope.settings.lang);
        });


        return methods;
    }]);

the app loads and gets (through XHR) the settings object, and I can see the settings reflects in my DOM. (captions for example)

Now when I call the initChat method from my HomeCtrl I get an undefined value when trying to access the scope.settings property ... what's strange is that when I log the scope I can see the settings object ... What am I missing?

Update: I found out that what I'm doing wrong is calling my method directly from the controller body:

function HomeCtrl($scope, $location, Common) {
...
Common.initChat()
...
}

if I change the call to be triggered by a click all works fine, but I do need this code to run when the page loads, What is the right approach?

Answer 1

It's a simple problem, I think: You're calling initChat in your scope before the $http call retrieves scope.settings.