Communication from child controller with parent controller in AngularJs

by Afroza Yasmin

HTML

<h3>Communication from child controller to parent controller in AngularJs.</h3>

<div ng-app="myModule">

  <!--Parent div-->
  <div ng-controller="firstCtrl">
    <h3 ng-show="info"> My name is {{name}},{{age}} years old. </h3>
    <!--Child div-->
    <div ng-controller="secondCtrl">
      <input type="text" ng-model="name" placeholder="Enter Name">
      <input type="number" ng-model="age" placeholder="Enter Age">
      <button ng-click="submit()">OK</button>
    </div>
  </div>



</div>

JavaScript

var app = angular.module("myModule", []);

app.controller("firstCtrl", function($scope) {
  $scope.name;
  $scope.age;
  $scope.$on('myEvent', function(event, data) {
    $scope.name = data.myName;
    $scope.age = data.myAge;

    $scope.info = true;
  })
});

app.controller("secondCtrl", function($scope) {
  $scope.name;
  $scope.age;

  $scope.submit = function() {

    $scope.$emit('myEvent', {
      myName: $scope.name,
      myAge: $scope.age
    })
  }
});