Pass Data from Parent Controller to Child Controller in AngularJS

In this blog we will learn how to pass data from Parent controller to child controller and child controller to parent controller in AngularJs

In Angular there are many way by which we can solve this problem.

1. Using $rootScope
2. $brodCast and $emit service
3. Using Custom service

In this Article I will demonstrate all example one by one.

For solving this problem I’m creating two controller Parent Controller and in this controller one child Controller
With one Button and text box in each controller. So when give some value in Parent Controller text box and click parent button data.

Pass to child controller and when give some value to child controller and click child button data pass to parent controller.

Now let’s start coding.

Using $rootScope

In a module there is only one $rootScope created and it hold all the $scope.

Create module and controller.



Html Code



Output



Using $broadcast and $emit

$broadcast and $emit service used with $on service.

$broadcast always use to pass data from Parent Controller to child controller (Down direction) and $emit service use to pass data.

From child controller to parent controller (Up direction).

Create module and controller.



HTML code



After run output,



Using Custom Service

To Pass Data from one controller to other controller we can also create custom service.

Create Service



Create Controller



Html Code



Output