Accessing one controller data from another

Question

I want to use data from one controller to another , can any one please help me. For example :

  .controller('firstCtrl',function($scope){
   $scope.item = [{id:1, name:'John'},{id:2, name:'carter'},{id:3, name:'barsoom'},..]
   })
   .controller('secondCtrl',function($scope){
    $scope.jsondata = item;
    console.log(JSON.stringify($scope.jsondata));
   })

Is it possible. can any one please help me. Thank you.

Possible duplicate of [How to share data between controllers in angular app in the right way](http://stackoverflow.com/questions/34442752/how-to-share-data-between-controllers-in-angular-app-in-the-right-way) — Andrew, May 16 '16 at 15:29
Hi.. Thank for reply. I have posted another [question](http://stackoverflow.com/questions/37257798/accessing-data-from-one-controller-to-another) , bit explained in detail — naik3, May 16 '16 at 15:41

score 1 · Answer 1 · answered May 16 '16 at 13:12

If you want to share data between controllers, you should use Angular Services. They are singleton that are intended to be used to share common code in your application. So, it is a good practice to put, for example, your $http request, or some data that is used in many places.

Some example would be:

https://jsfiddle.net/relferreira/2b5amcya/

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['UserService'];

function mainController(UserService){

    var vm = this;
  vm.name = UserService.getName();

}

angular.module('app')
    .controller('DetailController', detailController);

detailController.$inject = ['UserService'];

function detailController(UserService){

    var vm = this;
  vm.name = UserService.getName();
  vm.other = 'test';

}

angular.module('app')
    .factory('UserService', userService);

function userService(){
    var name = 'Renan'; 
  return{
    getName: getName
  }

  function getName(){
    return name;
  }
}

HTML:

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">
    {{mainVm.name}}
  </div>

  <div data-ng-controller="DetailController as detailVm">
    {{detailVm.name}}
    {{detailVm.other}}
  </div>

</div>

Hi.. Thank for reply. I have posted another [question](http://stackoverflow.com/questions/37257798/accessing-data-from-one-controller-to-another) , bit explained in detail — naik3, May 16 '16 at 15:42

score 1 · Accepted Answer · edited Apr 12 '18 at 09:17

1

Try this

 <body ng-app="myApp">

    <div ng-controller="ctrl">
        {{name}}

    </div>

    <div ng-controller="c">
        {{name}}

    </div>


</body>

var app = angular.module('myApp', []).controller('ctrl', ['$scope', '$rootScope', function ($scope, $rootScope) {

    $rootScope.name = "vipin";

}]).controller('c', ['$scope', '$rootScope', function ($scope) {


}])

Run this code you can get $rootScope.name value in both controller

var app = angular.module('myApp', []).controller('ctrl', ['$scope', '$rootScope', function ($scope, $rootScope) {

        $rootScope.name = "vipin";
    }]).controller('c', ['$scope', '$rootScope', function ($scope) {


    }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

<body ng-app="myApp">    
    <div ng-controller="ctrl">
        {{name}}
    </div>

    <div ng-controller="c">
        {{name}}
    </div>
</body>

edited Apr 12 '18 at 09:17

Shabin Muhammed

1,092
2
18
29

answered May 16 '16 at 13:12

vipin Bhandari

192
7

Hi.. Thank you for reply. I tried, it is not working. – naik3 May 16 '16 at 14:15
Hi.. Thank for reply. I have posted another [question](http://stackoverflow.com/questions/37257798/accessing-data-from-one-controller-to-another) , bit explained in detail – naik3 May 16 '16 at 15:42
Thank you very much.. your code helped me a lot. Thank you. – naik3 May 17 '16 at 12:23
My pleasure. happy coding – vipin Bhandari May 17 '16 at 13:38

score 0 · Answer 3 · answered May 16 '16 at 13:13

0

You can use event broadcast or Service to inject in controller.

Method 1:

myApp.controller('FirstCtrl', function ($scope) {
    $scope.$broadcast('Test_Data',{ data: {} });
  })
myApp.controller('SecondCtrl', function ($scope) {
    $scope.$on('Test_Data', function(event, args) {
        var data= args.data
      // do something useful here;
    });
  });

Method 2 :

     myApp.factory('TestData', function () {
        var data = {};
            var setData=function(){...}
        return data;
      });
    myApp.controller('FirstCtrl', function ($scope, TestData) {
        $scope.data = TestData;
      })

answered May 16 '16 at 13:13

Anita

2,352
2
19
30

Hi .. Thank you for reply. I was trying first method , **$scope.$broadcast('Test_Data',{ data: {} });** In this line can you please explain "{ data;{} }". How can I use in my code. – naik3 May 16 '16 at 14:18
I tried with it : **$scope.$broadcast('Test_Data', $scope.item);** is it correct..?? – naik3 May 16 '16 at 14:40
Hi.. Thank for reply. I have posted another [question](http://stackoverflow.com/questions/37257798/accessing-data-from-one-controller-to-another) , bit explained in detail – naik3 May 16 '16 at 15:42

Accessing one controller data from another

3 Answers3