angularjs - Computed property from inner scope is needed in outer scope -

jsfiddle: http://jsfiddle.net/s0ngtz8j/

i have outer controller: outerctrl. property "name" in scope of outerctrl.

within scope of outerctrl, have inner controller: innerctrl. property "suffix" in scope of innerctrl.

i need computed property fullname (= name + suffix) in both outer , inner controllers. in above given jsfiddle, able fullname in innerctrl. how make available in outerctrl?

html:

<div ng-app="myapp">     <div ng-controller="outerctrl">         name: <input type="text" ng-model="name">         <br>         (outer) name : <strong>{{name}}</strong>         <br>         (outer) full name: {{fullname}}             <div ng-controller="innerctrl">             suffix: <input type="text" ng-model="suffix">             <br>             (inner) name: {{name}}             <br>             (inner) full name: {{fullname}}         </div>     </div> </div> 

js:

var myapp = angular.module('myapp', []);  myapp.controller('outerctrl', function ($scope) {     $scope.name = "adam";  });  myapp.controller('innerctrl', function ($scope) {     $scope.suffix = "jr.";     $scope.fullname = $scope.name + " " + $scope.suffix;     $scope.$watch('name + suffix', function() {        $scope.fullname = $scope.name +' '+$scope.suffix;     }); }); 

this simplified question enhancement complex app working. name property has stay in outerctrl. suffix has stay in innerctrl. fullname new functionality need add can fit anywhere.

one way solve put model within object, shared parent , child controllers.

have @ http://jsfiddle.net/83stdly4/1/

basically logic in main controller, in th child one.

myapp.controller('outerctrl', function ($scope) {   $scope.dude = {};   $scope.dude.name = "adam";   $scope.dude.suffix = "jr.";    $scope.$watch('dude.name + dude.suffix', function () {     $scope.dude.fullname = $scope.dude.name + ' ' + $scope.dude.suffix;   }); });