How to bind view to multiple controllers in angular js

Question

I have two contollers on web page ParentContoller and ChildContoller. How do I pass value from ParentContoller.js to ChildContoller.js. I can bind that value on view from parentContoller to child contoller view. But how do i pass it from one contoller.js to another contoller.js for further operation.What are different ways to passing values from one contoller to another in angular js.Please help

 <div ng-controller="ParentContoller">
    <input type="text" ng-model="dataService.value1" />
</div>

 // Controller 2 view
<div ng-controller="ChildContoller">
    The value entered by user is {{dataService.value1}}
</div>

One way and the best is to keep your data in models(factory) and inject them in both controllers. — AndreiC, Mar 23 '15 at 07:48
http://stackoverflow.com/questions/21919962/angular-share-data-between-controllers here you have a nice explanation — MSadura, Mar 23 '15 at 07:49
http://stackoverflow.com/questions/28439420/angularjs-shared-rest-service-between-modules-and-controllers/28439922#28439922 — Ahmed Adel, Mar 23 '15 at 08:38

score 0 · Answer 1 · answered Mar 23 '15 at 08:38

The best and right way is to used services.

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

app.service('myService', [function () {

  this.data = "data";
}])

app.controller('ParentContoller', ['$scope', 'myService', function ($scope,myService) {
  $scope.myService = myService;
}]);

app.controller('ChildContoller', ['$scope', 'myService', function ($scope,myService) {
  $scope.myService = myService;
}]);

<div ng-controller="ParentContoller">
    <input type="text" ng-model="myService.data" />
</div>

 // Controller 2 view
<div ng-controller="ChildContoller">
    The value entered by user is {{myService.data}}
</div>

score 0 · Answer 2 · answered Mar 23 '15 at 08:39

Nest the controllers:

<div ng-controller="ParentContoller">
    <input type="text" ng-model="dataService.value1" />

  <div ng-controller="ChildContoller">
      The value entered by user is {{dataService.value1}}
  </div>

</div>

Else try: http://blog.codehate.com/sharing-data-between-controllers-in-angular-js/

How to bind view to multiple controllers in angular js

2 Answers2