Passing value on Click event to another page using Angularjs

Question

I am trying to pass a data value from one page to another using Angular. I am new to Angular so please bear with me if it sounds silly. Here are my HTML and Angular code. Basically, I want ng-model "jobtitle" value to be filled in the form which is on different page once the user click on that div.

HTML for Page1 (data source)

<div id="portfoliolist" ng-app="careerApp" ng-controller="JobList">
<div class="portfolio DataScience col-xs-12 col-sm-12 col-md-4 col-lg-4" data-cat="DataScience">
<a href="~/career-form.cshtml" class="portfolio-wrapper">
                            <!-- Item Details -->
                            <div class="protfolio-caption-activeWrap">
                                <!-- Centered Details -->
                                <div class="center-details">
                                    <div class="details">
                                        <!-- Item Name -->
                                        <h2 class="name" ng-model="jobtitle">
                                            Winter
                                        </h2>
                                        <p><b>Job ID#</b> <span class="jobid" ng-model="jobid">2017-01</span></p>
                                        <p ng-click="set(data)" class="btn btn-sm">Apply</p>
                                        <!-- Tags -->
                                    </div>
                                </div>
                                <!-- End Center Details Div -->
                            </div>
                            <!-- End Item Details -->
                        </a>
                    </div>
</div>

HTML for Page2 (where Data is to be copied)

<div ng-app="careerApp" ng-controller="JobSelection">
                                    <form class="tsf-step-content">
                                        <label>{{jobtitle}}</label>
                                        <label>{{jobid}}</label>
                                        </form>
</div>

Angular script

    var careerApp = angular.module("careerApp", []);
careerApp.factory('myService', function () {
    var savedData = {}
    function set(data) {
        savedData = data;
    }
    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }

});

careerApp.controller("JobList", ['$scope', function ($scope) {
    myService.set($scope.jobtitle);
}]);
careerApp.controller("JobSelection", ['$scope',function ($scope) {
    $scope.jobtitle = myService.get();
}]);

Answer 1

You are wrong in declaring ng-app twice in two different pages. the simpler way to pass data is to store it in $rootScope.

Answer 2

Try something like this

//Controller foo

app.controller('fooController', ['$scope', 'foobarService', function($scope, foobarService){
$scope.StoreId = function(id){
    foobarService.setId(id);
}]);

//foobarService
app.service('foobarService', [function(){
    var id;

    this.setId = function(id){
        id = id;
    }

    this.getId = function(){
        return id;
    }
}]);

//Controller bar
app.controller('barController', ['$scope', 'foobarService', function($scope, foobarService){
    $scope.id = foobarService.getId();
}]);