Модули AngularJS/совместное использование области видимости

Вы можете использовать такую ​​услугу: Живое демо здесь (нажмите).

JavaScript:

var otherApp = angular.module('otherApp', []);
otherApp.factory('myService', function() {
  var myService = {
    someData: ''
  };
  return myService;
});
otherApp.controller('otherCtrl', function($scope, myService) {
  $scope.shared = myService;
});


var app = angular.module('myApp', ['otherApp']);

app.controller('myCtrl', function($scope, myService) {
  $scope.shared = myService; 
});

Разметка:

  <div ng-controller="otherCtrl">
    <input ng-model="shared.someData" placeholder="Type here..">
  </div>
  <div ng-controller="myCtrl">
  {{shared.someData}}
  </div>

Вот хорошая статья об обмене данными со службами.

Вы также можете вложить контроллеры, чтобы свойства области родительского контроллера наследовались дочерней областью: http://jsbin.com/AgAYIVE/3/edit

  <div ng-controller="ctrl1">
    <span>ctrl1:</span>
    <input ng-model="foo" placeholder="Type here..">
    <div ng-controller="ctrl2">
      <span>ctrl2:</span>
      {{foo}}
    </div>
  </div>

Но потомок не будет обновлять родителя — только свойства родителя обновляют дочерний элемент.

Вы должны использовать «точечное правило», чтобы обновления дочернего элемента влияли на родителя. Это означает вложение ваших свойств в объект. Поскольку у родительского и дочернего объектов один и тот же объект, изменения в этом объекте будут отражены в обоих местах. Именно так работают ссылки на объекты. Многие люди считают лучшей практикой не использовать наследование, а помещать все в директивы с изолированной областью действия.

Вы можете использовать $rootScope, каждое приложение Angular имеет ровно одну корневую область.

Справочник

app.controller('MainController', function ($scope, $rootScope) {
    $rootScope.data = 'App scope data';
}