Passing values between two pages in an Ionic application using angularJS

Question

I'm new to Ionic and Angular development and I'm having a bit of trouble with part of my ionic application right now. I have two pages, one with a series of drop down selects and a button to submit them, and another that will receive the choices that the user selected, process them and output the results. I'm having trouble getting the values from the drop down to the other page.

This is the controller from the page that the drop down is in.

.controller('mainCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, PassDay) {
$scope.test1 = "tuesday";
$scope.start = "school"
$scope.end = "mall"
}])

This is the controller from the page I want the values to go to. I want to assign them to the corresponding variables in this page when it loads up.

.controller('timesCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, PassDay) {
$scope.day = "tuesday";
$scope.start = "school";
$scope.end = "town";

I'm under the impression that I need a factory or service to do this, but I don't know how to get it to work. It crashes the app every time I try to use any factories.

app.factory('PassDay', function(){
    return 1;
});

This is the HTML from the page with the drop down selects

<form id="form1" class="list">
            <label class="item item-select" id="select3">
                <span class="input-label">Choose Day</span>
                <select ng-model="test1">
                    <option value="tuesday">Tuesday</option>
                    <option value="friday">Friday</option>
                    <option value="saturday">Saturday</option>
                </select>
            </label>
            <label class="item item-select" id="select1">
                <span class="input-label">Start Location</span>
                <select ng-model="start">
                    <option value="school">school</option>
                    <option value="mall">Mall</option>
                    <option value="train">Train Station</option>
                    <option value="amc">AMC Movies</option>
                    <option value="mall2">Mall2</option>
                    <option value="pav">Pavilion</option>
                    <option value="market">Market Fair</option>
                    <option value="town">town</option>
                </select>
            </label>
            <label class="item item-select" id="select2">
                <span class="input-label">Destination</span>
                <select ng-model="select.end">
                    <option value="mall">Mall</option>
                    <option value="school">school</option>
                    <option value="train">Train Station</option>
                    <option value="amc">AMC Movies</option>
                    <option value="mall2">Mall2</option>
                    <option value="pav">Pavilion</option>
                    <option value="market">Market Fair</option>
                    <option value="town">town</option>
                </select>
            </label>
        </form>

Answer 1

First you have to write proper route for timesCtrl.

 $state.when("times",
    url: "/times/:day/:start/:end', // Passing state parameters
    templateUrl: 'templates/times.html', // Times template url,
    controller: 'timesCtrl'
 })

Then write controllers as follows

.controller('mainCtrl', ['$scope', '$window', function ($scope, $window) {
  $scope.test1 = "tuesday";
  $scope.start = "school"
  $scope.end = "mall"

  $scope.showTimesPage = function() {
    $window.location.href = "#/times/" + $scope.test1 + "/" + $scope.start + "/" + $scope.end
  };
}])

.controller('timesCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
  $scope.day = $stateParams.day;
  $scope.start = $stateParams.start;
  $scope.end = $stateParams.end;
})

And call function on button click