Passing Object in ng-repeat to another page to display its contents - html

Question

I am working on a project using MySQL, Angular, Express, and Node. I have a list of objects in a ng-repeat and when I click a specific item I would like to pass the clicked object to another page and show the object's properties through angular.
Here is the code:
HTML:
<div class = "panel panel-info" ng-repeat="job in job">
<div class = "panel-heading clickable">
<h1 class = "panel-title">{{job.title}}</h1>
<span class = "pull-right"><i class = "glyphicon glyphicon-minus"></i></span>
</div>
<div class = "panel-body">
<!--This will soon be the place where the Students information is placed by NodeJS-->
<!--<p style = "text-decoration: underline"> Job Title <p>-->
<p> {{job.description}} </p>
<p> {{job.first_name}} {{job.last_name}}</p>
<p> {{job.location}} </p>
<br>
<div class="form-group">
<div class=" col-sm-15">
<button onclick="location.href='jobPage.html';" type="submit" class="btn btn-default btn-block">Apply</button>
</div>
</div>
</div>
</div>
Controller:
soopControllers.controller("landingController",
function ($scope, $http){
$scope.formData = {};
$http.get('/api/jobLanding')
.success(function(data){
$scope.job = data;
console.log(data);
})
.error(function(data){
console.log('Error: ' + data);
});
//I want this function to get the job and send it to another page
$scope.getJob = function(){
$http.post('/api/job', $scope.formData)
.success(function(data){
$scope.formData = {};
$scope.users = data;
//$location.redirect();
console.log(data);
})
.error(function(data){
console.log('Error: ' + data);
});
};
});

Answer 1

AngularJS applications work the same way as regular web sites when it comes to navigation. The difference is that instead of sending a request to the server to go to the new URL, the router intercepts the location change, and goes to a route. The controller (or the resolve function) of that route then gets what it needs to display.
So, what you need in your ng-repeat instead of your button is
<a ng-href="#/job/{{ job.id }}">Apply</a>
And you then need a route mapped to the path /job/:jobId.
In the controller of this route, you'll then do something like
$http.get('/api/job/' + $routeParams.jobId).then(function(response) {
$scope.job = response.data;
});

Answer 2

How about using ng-click on the repeated element and extract that element in your display/routed page.
<div ng-controller="plandingController"
class = "panel panel-info"
ng-repeat="job in job"
ng-click="value.val=job">
....
</div>
In jobPage.html
<div ng-controller="plandingController" ng-repeat="pickedjob in value.val">