Pass scope of one controller to another in AngularJS

Question

When I click a button in myCtrl controller. The ng-model of myCtrl2 should also be changed with ng-model of current controller:

<div ng-app="myApp" >
<div  ng-controller="myCtrl">
     <input type="text" ng-model="name">
     <button ng-click="just()">submit</button>
</div>
<div  ng-controller="myCtrl2">
    <input type="text" ng-model="name2">
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name="before";
    $scope.just = function()
    {
       $scope.name="after";

       $scope.name2="after";   /////  this is not working


    }
});
</script>

Add watch to listen changes or broadcast from rootscope.

Jai
– Jai

2016-01-25 05:44:44 +00:00
Commented Jan 25, 2016 at 5:44 — Jai
– Jai, Commented Jan 25, 2016 at 5:44

asubanovsky · Accepted Answer · 2016-01-25 05:49:59Z

3

There are several way to solve this. One of them is using $emit event. You can dig about it deeper here.

But for quick reference, I provide you a Plunkr here. Please check it out.

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

app.controller('myCtrl', function($rootScope, $scope) {
   $scope.name="before";
   $scope.just = function(){
      $scope.name="after";
      $rootScope.$emit('update');
   }
   }).controller('myCtrl2', function($rootScope, $scope){
      $rootScope.$on('update', function(){
      $scope.name2 = "after";
   })
});

answered Jan 25, 2016 at 5:49

asubanovsky

1,7483 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

asubanovsky Over a year ago

Yes you're welcome. So please mark this as the accepted answer to help people who face the same situation as you had, in the future. Thans.. :)

krishanpal singh Over a year ago

HOW TO ACCEPT THIS ANSWER

asubanovsky Over a year ago

There should be a check icon in the left side of the answer.

user815437 · Accepted Answer · 2016-01-25 05:41:25Z

0

You would need to make a service which you would then inject into your controllers.

https://docs.angularjs.org/guide/services

answered Jan 25, 2016 at 5:41

user815437

Comments

Rouhollah Torshizi · Accepted Answer · 2018-06-21 07:34:10Z

0

you can use $rootScope for this:

var app = angular.module('plunker', []);
app.controller('myCtrl', function($rootScope, $scope) {
   $scope.name="before";
   $scope.just = function(){
      $scope.name="after";
      $rootScope.nameInRootScope=$scope.name;
   }
   }).controller('myCtrl2', function($rootScope, $scope){
      $scope.name2 = $rootScope.nameInRootScope;
   })
});

answered Jun 21, 2018 at 7:34

Rouhollah Torshizi

1613 silver badges11 bronze badges

Collectives™ on Stack Overflow

Pass scope of one controller to another in AngularJS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related