If it were up to me, I would have tackled the problem in this manner (check out plunker for reference):
Firstly, setting up the routing like so:
$stateProvider
.state('view1', {
url: "/view1",
templateUrl: "view1.html",
controller:"WizardCtrlStep1"
})
.state('view2', {
url: "/view2",
templateUrl: "view2.html",
controller:"WizardCtrlStep2",
params:{
playerId:null
},
resolve:{
player:function($http, $stateParams){
//You can utilize the player id here
console.log($stateParams.playerId);
return $http.get("test.json");
}
}
})
I prefer having a single controller per state as it helps keep things organized and clear.
Additionally, I make use of a resolve to handle the ajax call prior to loading the step2 view.
Below is the controller for the 2nd step:
//I get the resolved value "player" injected
controller('WizardCtrlStep2', function($scope, player) {
$scope.name = 'World';
//To access the result of the $http call, use .data
$scope.player = player.data;
})
And lastly, the HTML markup:
<input type="text" ng-model="main.playerId">
<button ui-sref="view2({playerId:main.playerId})">proceed</button>
In this snippet, I pass a "playerId" parameter to ui-sref which will be utilized in the resolve function.
I hope this explanation was helpful. If you have any queries, feel free to ask.