<h1>Example: Parent Scope Sharing</h1>
<p>入れ子にしたコントローラの親のスコープに子からアクセスする。</p>
<div ng-app="myApp">
  <div ng-controller="parentController as parent" class="ctrl">
    <h2>mainController</h2>
    <p>Message: {{ parent.message }}</p>
    
    <div ng-controller="childController as child" class="ctrl">
      <h3>childController</h3>
      <p>Message: {{ child.message }}</p>
      <button ng-click="child.getParentMessage()">親のメッセージを取得する</button>
    </div>
   </div>
</div>
@import "bourbon";

body {
  padding: 1.5rem;
  
  font-size: .8em;
}

.ctrl {
  @include clearfix();
  padding: .5rem;
  border: 1px solid #aaa;
  box-sizing: border-box;
}
View Compiled
(function() {
  "use strict";

  var appName = 'myApp';

  angular
    .module(appName, []);

  angular
    .module(appName)
    .controller('parentController', parentCtrl)
    .controller('childController', childCtrl);
  
  function parentCtrl($scope){
    var vm = this;

    vm.message = '親のメッセージです。';
  }

  function childCtrl($scope){
    var vm = this;

    vm.message = '子のメッセージです。';
    vm.getParentMessage = getParentMessage;

    function getParentMessage(){
      vm.message = $scope.$parent.parent.message;
      //$scope.$parent.[ControllerAsName].<scopeName>;
    }
  }

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js