get values to edit in an other page with Angular - angularjs

Question

I have values that I want to edit in an other page
<tr ng-repeat="facilitator in listFacilitators" ng-click="showDetails(facilitator);goToFacilitatorP()">
<td>{{facilitator.username}}</td>
<td><li><ul>{{facilitator.cwsessionsAnime}}</ul></li></td>
<td><li><ul>{{facilitator.profilFollow}}</ul></li></td>
</tr>
when I click on I'm supposing to be redirected in another page to show the details and edit them , so I tried to do this in the controller:
$scope.showDetails= function(facilitator){
$scope.selectedFac= facilitator;
}
and in the second page, I do this:
<tr>
<td> {{selectedFac.username}}</td>
<td> {{selectedFac.lastname}}</td>
<td> {{selectedFac.firstname}}</td>
<td> {{selectedFac.title}}</td>
</tr>
it works in the same page but not when I'm redirected, can you help me please?
UPDATE:
I do this but I still haven't data in the seconde page:
1- In the first controller for the 1 page I declared:
profilCtrl.controller('ProfilCtrl', [ '$scope','$location', 'profilService', 'facilitatorPService', function($scope,$location, profilService, facilitatorPService) {
/* ---- appel a facilitator Service ---- */
var facilitator = '';// What ever this is set to in the first place
facilitatorPService.facilitator = facilitator;
2- In my 2nd controller (for the second in where I want to show the details) , I have declared:
facilitatorPCtrl.controller('facilitatorPCtrl', [ '$scope','$rootScope','$cookieStore','$location','membreService','facilitatorPService','userService',function($scope,$rootScope,$cookieStore,$location, membreService,facilitatorPService, userService) {
facilitatorPservice.editFacil= function($scope){
$scope.showDetails = function(){
$scope.selectedFac = facilitatorPService.facilitator;
}
};
3- Ans in my service facilitatorPService I have this:
facilitatorPService.factory('facilitatorPService', [ '$resource','$http', function($resource,$http) {
var service = {
getAllFacilitators : function($scope){
return $resource('/gari-web/services/facilitators/AllFacilitators', {}, {
query : {
method : 'GET', isArray:true,
}}
});
},
editFacil: function($scope){
var self= this;
self.facilitator={};
}};
return service;
} ]);
4- in My html page I put this:
<td>{{selectedFac.username}}</td>
Can someone please tell me what I did wrong, I don't find the mistake

Answer 1

Controllers are 'flushed' when you change views. To keep data from a view to another, store your data within a Service.
UPDATE
.service('FacilitatorService', [
function() {
var self = this;
self.facilitator = {};
}
])
Then in your controllers, inject yourself the service you just created.
.controller('FirstController', ['FacilitatorService',
function(FacilitatorService) {
var facilitator = '';// What ever this is set to in the first place
FacilitatorService.facilitator = facilitator;
}
])
And in your second controller
.controller('SecondController', ['FacilitatorService', '$scope',
function(FacilitatorService, $scope) {
$scope.showDetails = function(){
$scope.selectedFac = FacilitatorService.facilitator;
}
}
])
Like this, your FacilitatorService.facilitator data will be accesible in all your controllers that use FacilitatorService

Answer 2

I recommend using ui router, this resolve two problems, the view change and the data share.
Read more about router ui
doc http://angular-ui.github.io/ui-router/site/#/api/ui.router
The current state
$stateProvider
.state('current', {
url: "/curent",
templateUrl: 'current.html',
controller: 'currentCtrl'
})
Then you can choose how change the view and share the data, the first is the controller, the second is html. Only use one
From current controller (option 1)
$scope.showDetails= function(facilitator){
$state.go('togo', {myCurrentdata: facilitator}) ;
}
From current html (option2)
<tr ng-repeat="facilitator in listFacilitators" ui-sref="togo({myCurrentdata : facilitator})">
<td>{{facilitator.username}}</td>
<td><li><ul>{{facilitator.cwsessionsAnime}}</ul></li></td>
<td><li><ul>{{facilitator.profilFollow}}</ul></li></td>
</tr>
The state that you want to go
$stateProvider
.state('togo', {
url: "/togo",
templateUrl: 'togo.html',
controller: 'togoCtrl'
param: {myCurrentdata: null}
})
To go controller
if($stateParams.myCurrentdata){
$scope.selectedFac = $stateParams.myCurrentdata
}