AngularJS: Pass info from Controller to Service - angularjs

Question

Is there a way to pass info from a controller to service? I know that you should pass info from the service to the controller, but let me explain you my problem:
I have two screens (or two views) with different controller but with the same module. Let's name them: ControllerOne with ViewOne and ServiceOne AND ControllerTwo with ViewTwo and ServiceTwo.
ServiceOne makes an http request to get some json data (from a remote origin). In ControllerOne I have a function where it calls the ServiceOne to get all data and in the ViewOne I show the list of all videos fetched from the remote origin (from ControllerOne).
The code for ServiceOne is shown above:
(function() {
'use strict';
angular
.module('MyApp.MyModule')
.factory('ServiceOne', ServiceOne);
ServiceOne.$inject = ['$http', '$q'];
function ServiceOne($http, $q) {
var url = 'https://THE_LINK_I_WANT_TO_GET_DATA_FROM';
var result = [];
var service = {
getAllVideos: getAllVideos,
getVideo: getVideo
};
return service;
function getAllVideos(callback){
$http.get(url)
.success(function(data) {
result = data.result;
callback(result);
});
}
function getVideo(videoId) {
for (var i = 0; i < result.length; i++) {
if (result[i].videoId === videoId) {
return $q.when(result[i]);
}
}
return $q.when(null);
}
}
})();
The ControllerOne looks like this:
(function() {
'use strict';
angular
.module('MyApp.MyModule')
.controller('ControllerOne', ControllerOne);
ControllerOne.$inject = ['$scope', '$state', 'ServiceOne'];
function ControllerOne($scope, $state, ServiceOne) {
var vm = angular.extend(this, {
videos: [],
navigateToVideo: navigateToVideo
});
ServiceOne.getAllVideos(function(data){
vm.videos = data;
});
function navigateToVideo(videoId) {
$state.go('app.video', { videoId: videoId } );
}
}
})();
On ViewOne, everytime someone clicks on a video, I navigate them to another view (ViewTwo in my case) and a parameter is passed (a unique id).
The ControllerTwo looks like this:
(function() {
'use strict';
angular
.module('MyApp.MyModule')
.controller('ControllerTwo', ControllerTwo);
ControllerTwo.$inject = ['$scope', '$state', '$stateParams', 'ServiceOne'];
function ControllerTwo($scope, $state, $stateParams, ServiceOne) {
var vm = angular.extend(this, {
video: []
});
(function init(){
loadData();
})();
function loadData(){
var videoId = String($stateParams.videoId);
ServiceOne.getVideo(videoId)
.then(function(video) {
vm.video = video;
});
}
}
})();
In the ControllerTwo I save the parameter passed from ControllerOne, and save it on videoId. Then I call a function of ServiceOne to get the object I was looking for.
So, my question is:
Can I pass the object vm.video of the ControllerTwo to ServiceTwo, so I can use it in the future?
Thanks!

Answer 1

Services are MADE for sharing stuff(data and methods) across you application. So, to answer your question simply: absolutely, yes you can pass your object to your service. And, it couldn't be any easier...
ServiceOne & ServiceTwo can be accessed by ANY controller, and if you want to "pass something" to a service it's as simple as this:
ControllerOne.$inject = ['$scope', '$state', 'ServiceOne', 'ServiceTwo'];
function ControllerOne($scope, $state, ServiceOne, ServiceTwo) {
function loadData(){
var videoId = String($stateParams.videoId);
ServiceOne.getVideo(videoId)
.then(function(video) {
vm.video = video;
ServiceTwo.video = video; //bam, you're done
});
}
}
The video will persist until you restart the app.
ControllerOne.$inject = ['$scope', '$state', 'ServiceOne', 'ServiceTwo'];
function ControllerOne($scope, $state, ServiceOne, ServiceTwo) {
// now you can access it from your other controller
var videoStoredInServiceTwo = ServiceTwo.video;
}
The only thing to be aware of is timing. You might want to check that the video exists on ServiceTwo before you try to retrieve it.
if( ServiceTwo.video ) {
videoStoredInServiceTwo = ServiceTwo.video;
}