title: AngularJS - understanding scopes
body: <p>I'm confused, I have this module which routes to different controllers:</p>
  
  <pre><code>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'});
  }]);
  </code></pre>
  
  <p>and a Common service like so:</p>
  
  <pre><code>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;
      }]);
  </code></pre>
  
  <p>the app loads and gets (through XHR) the settings object, and I can see the settings reflects in my DOM. (captions for example)</p>
  
  <p>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?</p>
  
  <p><img src="https://i.stack.imgur.com/thwB7.jpg" alt="enter image description here"></p>
  
  <p><strong>Update:</strong> I found out that what I'm doing wrong is calling my method directly from the controller body:</p>
  
  <pre><code>function HomeCtrl($scope, $location, Common) {
  ...
  Common.initChat()
  ...
  }
  </code></pre>
  
  <p>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?</p>