AngularJS : How to get http data in differents controllers - angularjs

Question

when I submit a form I have a controller that communicates with a service, which gets data from a server and return these data to the controller. Meanwhile, I change view with the form action. My problem is that I'd need the server response data in the second view (which has an another controller), but these are undefined. How can I fix this problem?
Ps. I'm sorry for my English
// code...
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html",
controller: 'SearchCtrl'
}
}
})
.state('app.result', {
url: "/result",
views: {
'menuContent' :{
templateUrl: "templates/result.html",
controller: "ResultCtrl",
}
}
})
// code...
<form name="search_form" ng-submit="searchLines()" action="#/app/result" novalidate>
// code...
</form>
.factory('Bus', function($http){
return{
get: function(callback){
$http({
method: "POST",
url: "someUrl",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: {someData from the form}
})
.success(function(data) {
callback(data);
})
.error(function(data, status, error) {
console.log(data, status, error);
});
}
}
});
.controller('SearchCtrl', function($scope, Bus){
$scope.searchLines = function(){
Bus.get(function(data){
$scope.company = data.company; // this is ok
});
};
})
.controller('ResultCtrl', function($scope, Bus){
// I'd like to have $scope.company here
})

Answer 1

Use a service for that.
Controllers shouldn't hold state.
Two controllers can communicate via a service(the service will hold the state as well).
Add a company variable on the Bus service and add a getter so other controllers can fetch the data from Bus.
Example:
HTML:
<div ng-app="app">
<div ng-controller="aCtrl">{{model.stateA}}</div>
<div ng-controller="bCtrl">{{model.stateB}}</div>
</div>
JS:
var app = angular.module('app', []);
app.service('myService', function ($q) {
var state = "12312";
this.getStateFromServer = function () {
return $q.when(state);
}
this.getRealState = function(){
return state;
};
});
app.controller('aCtrl', function ($scope, myService) {
myService.getStateFromServer().then(function (res) {
$scope.model = {
stateA: "A" + myService.getRealState()
};
});
});
app.controller('bCtrl', function ($scope, myService) {
$scope.model = {stateB: "B" + myService.getRealState()};
});
JSFIDDLE.