Send array data from one controller to another controller in angularjs - arrays

Question

I will select the images in one page and show those selected 5 images in other page.the selected images will be stored in selected array initially, before sending put request to server. In showing page, i had one button called change picture ,i am sending put request to server after selecting 5 images in selecting image page,that will be stored in an array called other_media.if i click change picture button it will redirect to selecting image page.(again the selected array will be empty) in selecting image page, those images which are already selected to be shown at right side[means i need to push the data in other_media array to selected array] of the result in plunker. i need exactly showing the images which are already selected(posted or put) the plunker is only one page which i select the images.
Plunker https://plnkr.co/edit/BM4AavLn9uKxKL4wdbT6?p=preview
<div class="row">
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">All Pictures</h3>
<div class="row" ng-repeat="media in pinMedia">
<!-- pin.media_id!=media._id || -->
<div class="col-xs-12 col-sm-12 col-md-5">
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div class="col-xs-12 col-sm-12 col-md-5">
<button ng-disabled='limit()' class="btn btn-success" style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="toselected(media)">
<i class="fa fa-picture-o"></i>
Set Picture</button >
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">Selected Pictures</h3>
<div ng-repeat="media in selected">
<!-- pin.media_id==media._id && -->
<div>
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div>
<a class="btn btn-success " style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="tosource(media)">
<i class="fa fa-picture-o"></i>
Remove Picture</a>
</div>
</div>
</div>
</div>
</div>
<!--I have id in my work. but here we don't have id. i need to save particular object in an selected array to another array -->
<button ng-click="setMediaForCurrentPin(selected)" class="btn btn-success" style="margin:50px auto; display:table;">Submit</button>
Javascript
$scope.selected = [];
FromOne2Another = function(source, target, item) {
target.push(item);
source.splice(source.indexOf(item), 1);
}
//this is the starting of code where i send the selected pitures from unselected before put request.
$scope.toselected = function(item) {
FromOne2Another($scope.pinMedia, $scope.selected, item);
}
$scope.tosource = function(item) {
FromOne2Another($scope.selected, $scope.pinMedia, item);
}
//this is the ending of above code
//From here i am trying to get the data from the stored media
$scope.toSelectedArray=function(item){
FromOne2Another($scope.other_media, $scope.selected, item);
console.log($scope.pins);
}
If i use like this inside service, why i am getting Cannot read property 'splice' of undefined
one my website video to understand https://nimbus.everhelper.me/client/notes/share/376595/vyEMbEoxsFIfN3X39T5tLdbD8aGfxAgF