title: Angular JS parent controller unable to pass alone variables to child controller
body: <p>I want to share two variables across 2 different controllers, one nested into another:</p>
  
  <p>approach1:</p>
  
  <pre><code>&lt;body ng-controller="WGHomeLanCtrl"&gt;
      &lt;section&gt;&lt;div&gt;&lt;a&gt;{{text}}&lt;/a&gt;&lt;/div&gt;&lt;/section&gt;
      &lt;section&gt;...&lt;/section&gt;
      &lt;section ng-controller="WGHomeSurveyCtrl"&gt; &lt;div&gt; &lt;a&gt;{{lan}} and {{lan2}}&lt;/a&gt;&lt;/div&gt;&lt;/section&gt;
  </code></pre>
  
  <p>In my controller file, I have:</p>
  
  <pre><code>var HomeControllers = angular.module('HomeControllers', []);
  HomeControllers.controller('WGHomeLanCtrl', function($scope, $http) {
      $scope.lan = "en";
  
      $http.get("lan/lan_".concat($scope.lan, ".json")).success(function(data) {
          $scope.text = data;
      });
  
  
  HomeControllers.controller('WGHomeSurveyCtrl', ['$scope', 
      function($scope) {
      $scope.lan2= $scope.text;
      $scope.lan = $scope.$parent.lan;
  }]);
  </code></pre>
  
  <p>The actual result is that, the {{text}} in the parent controller is showing up, meaning that the $http part is working fine. in the child scope, the {{lan}} is showing correct value too; however the {{lan2}} is not showing correct; the {{lan2}} is shown as plain text.</p>
  
  <p>Any thoughts why?? Thank you!</p>