Share data between AngularJS controllers

Question

I'm trying to share data across controllers. Use-case is a multi-step form, data entered in one input is later used in multiple display locations outside the original controller. Code below and in jsfiddle here.

HTML

<div ng-controller="FirstCtrl">

<input type="text" ng-model="FirstName">

<!-- Input entered here --> 

<br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here --> 

</div> 

<hr> 

<div ng-controller="SecondCtrl"> Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? --> </div>

JS

// declare the app with no dependencies 

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

// make a factory to share data between controllers myApp.factory('Data', function(){

 // I know this doesn't work, but what will? 

var FirstName = ''; 

return FirstName; }); 

// Step 1 Controller 

myApp.controller('FirstCtrl', function( $scope, Data ){ 

}); 

// Step 2 Controller 

myApp.controller('SecondCtrl', function( $scope, Data ){ $scope.FirstName = Data.FirstName; 

});

Any help is greatly appreciated.

Answer 1

For sharing data between AngularJS controllers.

Are you interested in learning Angularjs from the basics! Here's the right video for you on Angularjs provided by Intellipaat:

You can use the following code:-

.controller('CadastroController', ['$scope', 'RouteSharedScope',

   function($scope, routeSharedScope) { 

     var customerScope = routeSharedScope.scopeFor('/Customer');  

   } 

])