How to send data from one controller to another controller in angularjs

Question

Below is my playlist json data coming from playlist controller.

{
    "id":18,
    "file":{"url":"/uploads/playlist/file/18/01_-_MashAllah.mp3"},
    "event_id":23,"created_at":"2015-11-11T10:33:52.000Z",
    "updated_at":"2015-11-11T10:33:52.000Z",
    "name":"01 - MashAllah.mp3"
},

{
   "id":19,
   "file":{"url":"/uploads/playlist/file/19/02_-_Laapata.mp3"},
   "event_id":19,"created_at":"2015-11-11T10:50:01.000Z",
   "updated_at":"2015-11-11T10:50:01.000Z",
   "name":"02 - Laapata.mp3"
}

Now i want to bind id and name to a playerController am i doing something like this

<div ng-controller="playlistsController">
  <div ng-repeat="playlist in playlists">
    <div ng-controller='PlayerController'>

      <input type=hidden ng-model="ID" ng-init="ID=playlist.id">
      <input type=hidden ng-model="Name" ng-init="Name=playlist.name">

    </div>
  </div>
</div>

and in controller

.controller('PlayerController',['$scope',function($scope) {

  console.log($scope.ID);
  console.log($scope.name);


}]);

but the console is showing undefined.

i don't know where i am going wrong as i am new to angular.

Answer 1

METHOD 1:

The best way to share data between controllers is to use services. Declare a service with getters and setters and inject into both the controllers as follows:

service:

app.service('shareData', function() {
    return {
        setData : setData,
        getData : getData,
        shared_data : {} 
    }

    function setData(data) {
        this.shared_data = data
    }

    function getData() {
        return this.shared_data
    } 
})

With your service defined, now inject into both the controllers and use the parent controller (in your case) to set the data as follows:

app.controller('playlistsController', function(shareData) {
    //your data retrieval code here
    shareData.setData(data);
})

And finally in your child controller, get the data:

app.controller('PlayerController', function(shareData) {
    $scope.data = shareData.getData();
})

METHOD 2:

Since, you have to communicate data from parent controller to child controller, you can use $broadcast as follows:

parent controller:

//retrieve data
$scope.$broadcast('setData', data);

And receive the data in child controller:

$scope.$on('setData', function(event, args) {
    $scope.data = args; 
})

Answer 2

First controller code is executed, then angular starts proceed html this controller is attached to. So just move your variable initialization to controller:

$scope.Name = $scope.playlist.name;
$scope.ID = $scope.playlist.id;

or just use original variables (if you dont need copy of them)

  <input type=hidden ng-model="ID=playlist.id">
  <input type=hidden ng-model="Name=playlist.name">

or you may leave it as is - it works disregarding that you don't see values in log.

Answer 3

You should use $parent:

JSFiddle

HTML:

<div ng-controller="playlistsController">
    <div ng-repeat="playlist in playlists">
        <div ng-controller='PlayerController'>
            <input type="text" ng-model="$parent.playlist.id">
            <input type="text" ng-model="$parent.playlist.name">
        </div>
    </div>
</div>

JS:

app.controller('PlayerController', function ($scope, $sce) {
    console.log($scope.$parent.playlists);
});