title: Accessing data from parent controller with child using 'this'
body: <p>I found a very helpful article on stackoverflow: </p>
  
  <p><a href="https://stackoverflow.com/questions/21453697/angularjs-access-parent-scope-from-child-controller">AngularJS access parent scope from child controller</a> </p>
  
  <p>The solution provided access the parent's scope, when the parent controller is global. </p>
  
  <p>So for:</p>
  
  <p><code>(function() {
      angular.module.controller('s').controller('ParentCtrl', function () {
      var vm = this;
      vm.cities = ["NY", "Amsterdam", "Barcelona"];
      }
  }());</code> </p>
  
  <pre><code>(function() {
      angular.module.controller('s').controller('ChildCtrl', function () {
      var vm = this;
  ParentCtrl.apply(vm, arguments);
  
  vm.parentCitiesByScope = $scope.pc.cities;
  vm.parentCities = vm.cities;
  } }());
  </code></pre>
  
  <p>How can you access the ParentCtrl's cities attribute, if we place an IIFE for each controller? Notice this ParentCtrl is no longer in the same scope as the child controller, so that we can't call the apply function. </p>
  
  <p>If I have the controllers in separate files, how can I access the scope of the parent?</p>
  
  <p>While having this as the html:</p>
  
  <pre><code>&lt;div ng-app ng-controller="ParentCtrl as pc"&gt;
  &lt;div ng-controller="ChildCtrl as cc"&gt;
      &lt;pre&gt;{{cc.parentCities | json}}&lt;/pre&gt;
      &lt;pre&gt;{{pc.cities | json}}&lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>