AngularJS: How to pass button clicked ng-model value from one controller to another controller

Question

I have a button where I am passing the ng-model value as a parameter to its ng-click function, Now after this ng-click function executes, I would like to send that ng-model value to another controller, how can I do this using angular?

Is there a way to do this?

Possible duplicate of [$on and $broadcast in angular](https://stackoverflow.com/questions/19446755/on-and-broadcast-in-angular) — Hadi J, Aug 22 '17 at 19:17

score 1 · Accepted Answer · answered Aug 22 '17 at 20:03

1

There are many ways to communicate between controllers.

use $broadcast like mentioned in other comments, or
use $emit

Something like this...

function Controller1($scope) 
{
    $scope.$on('myEvent', function(event, args) {
        // do the event
    });
  // another controller, directive
}

function Controller2($scope) 
{
  $scope.$emit('myEvent', args);
}

answered Aug 22 '17 at 20:03

Athanasios Babasidis

232
2
11

broadcast dispatches everything down while emit dispatches upwards through hierarchy. – Athanasios Babasidis Aug 22 '17 at 20:06

score 0 · Answer 2 · answered Aug 23 '17 at 06:03

1.In first Controller, you can do:

$rootScope.$broadcast('eventName', value);

and listen to the event in second Controller:

$scope.$on('eventName', function (event, value) {//your code});

2.In first controller assign the values to the $rootScope variable then access from the other controller.for example in first controller

$rootScope.TestValue="10";

in second controller

$scope.receiveValue=$rootScope.TestValue;

3.AngularJS- How to pass data from one controller to another on ng-click()?

score -2 · Answer 3 · edited Aug 23 '17 at 06:23

Use angular service to communicate between 2 controller. Watch this Video

Yes $broadcast will work for you.

Here are some essential parts:

Create service that implements message bus functionality (e.g. $scope instance)
Inject service to both controllers
$broadcast() event from one controller
subscribe to event with $on() in another

Example:

HTML

<div ng-controller="ctrl1 as ctrl1">
  <button ng-click="ctrl1.hello()">Say hello</button>
</div>
<div ng-controller="ctrl2 as ctrl2">{{ctrl2.messages}}</div>

JavaScript

angular.module('app', [])
.service('messageBus', ['$rootScope', function($rootScope) {
  return $rootScope.$new();
}])
.controller('ctrl1', ['messageBus', function(messageBus) {
  this.hello = function() {
    messageBus.$broadcast('hello', 'Hi! '); // <= send message
  }
}])
.controller('ctrl2', ['messageBus', function(messageBus) {
  var ctrl2 = this;
  this.messages = '';
  console.log(messageBus.mb)
  messageBus.$on('hello', function(evt, msg) { // <= receive message
    ctrl2.messages += msg;
  });
}]);

AngularJS: How to pass button clicked ng-model value from one controller to another controller

3 Answers3