Use scope between controllers in Angularjs

Question

i have tow controllers in Angularjs and want to use scope between this controllers. in first controller i get data from server and put in scope.myData. this scope have many item that i write one item. in second controller i have query scope that init by myData.title scope from first controller. but myData.title scope is undefind for second controller while it have correct value. in fact not send myData.title value to init function while i write it such this {{myData.title}} in second controller display it value. what is my problem?

my code like this :

  app.controller("Controller1",function ($scope, $http) {
     $scope.myData = {
        title:""
      }
        $scope.getData = function(){
    if(marketerId != null){
        $http.get('/getData')
            .success(function(data, status, headers, config) {
                $scope.myData = data;
            })
            .error(function(error, status, headers, config) {
                console.log(status);
            });
       }
   };
  }

and my second controller is

   app.controller("Controller2",function ($scope, $http) {
       $scope.query = "";
       this.init = function (query) {
        $scope.query = query;
    }
   }

and in html page my code is :

      <div ng-controller='controller1 as c1'>
        <div ng-controller='controller2'>
            <input type='text' ng-model='query' ng-init='c1.init(myData.title)' >
        </div>
      </div>

Answer 1

You could use the rootScope, which is shared between all controllers.

A better way would be to create a service which takes care of storing and fetching the data and have both controllers use this service. They can then both access the data.

Answer 2

There are some basic global rules for angulars.

1) Child controller access the scope of parent controller (Only if new scope not created in child).

2) For sharing data between two controller use service / factory .

For your example

  <div ng-controller='controller2'> <input type='text' ng-model='query' ng-init='query = myData.title'> </div> 

OR

  app.controller("Controller2",function ($scope, $http) { $scope.query = $scope.myData.title; } 

Answer 3

Try this,

<div ng-controller='Controller1 as c1'>
    <div ng-controller='Controller2 as c2'>
        <input type='text' ng-model='query' ng-init='c2.init(c1.myData.title)' >
    </div>
</div>

**Be careful with your controller names, it should match with your js file.

**I recommend to always use controllerAs syntax, please also make your instance name more readable / understandable.

Answer 4

You can create a Service like this :

 app.factory('SharedData', function(){
   var sharedData='';
   return {
      getSharedData : function(){
         return sharedData;
      },
      setSharedData : function(data){
         sharedData = data;
      }
   };
 })

Then in your 1 st controller add:

 app.controller("Controller1",function ($scope, $http, SharedData) {
     $scope.$watch('SharedData', function(data) {
         SharedData.setPricingData(data);
     });
 }

And in the 2nd one :

 app.controller("Controller2",function ($scope, $http, SharedData) {
     $scope.$watch(function() { return SharedData.getSharedData();  },
                function(data) {$scope.sharedData= data;});;
 }