Master detail in AngularJS - angularjs

Question

I try to write a small app that get a list from REST API and displays details for each selected item. I was looking for a simple tutorial on how to transfer the selected id from the list view to the detail view, but couldn't figure out. I assume I need to use the Master-detail technique.
Here's the code:
The list view:
<ul>
<li ng-repeat="gadgetDetails in gadgettDetails">
<div>
<p>{{gadgetDetails.type}}</p>
<p>{{gadgetDetails.manufacturer}}</p>
</div>
<hr />
</li>
</ul>
And the detail view
<div>
<p>Go back to Gadgets list</p>
<p>{{gadgetDetails[2].type}}</p>
<p>{{gadgetDetails[2].color}}</p>
<p>{{gadgetDetails[2].manufcturer}}</p>
</div>
So just for the question I've put 2 (the second object in the JSON list that I get from the REST API , but it actually should be gadgetDetails[i].type
but I couldn't figure out how to get the index (for example i) for each item in the list
This the controller:
GadgetListCtrl.controller('gdgtList', function($scope, $http, $filter) {
$http.get('https:.../gadgets.json').
then(function(response) {
$scope.gadgettDetails = response.data;
});
});
So the question is how to display for each item its details by the id.
Thanks

Answer 1

you can achive this by angular ui router params
below is dummy code
in .config block
$stateProvider
.state('gadgets', {
url: "/gadgets/:id",
templateUrl: 'gadgetDetail.html',
controller: 'gadgetController',
controllerAs: 'vm',
params: {
id: null
}
});
and in controller file, you can access the id as below
.controller('GadgetController', function($state, $stateParams) {
var selectedID = $state.params.id;
//alternatively you can get using $stateParams service
// $stateParams.id
if(selectedID) {
// get detail of gadget
}
});