AngularJS - Multiple StateParems - json

Question

We are still picking up and learning AngularJS but can't seem to figure this issue out, we want to be able to select a product type and use the formData value ("productType":"1") image1 to display the correct JSON product data related to this ID image2.
These are our controllers below within app.js, we have tried using multiple $stateParems but cant get seem to get the producttype id working with the stateParems.
Each productType ID is related to its own JSONstub, this is what we are using currently but this only grabs the jobID and not the producttype id below.
$scope.productid = $stateParams.jobID[0];
url: 'http://jsonstub.com/producttype/' + $scope.productid,
Here is our Plnkr, to find the Product Type section Click 'Login' > 'CHD24 - 26384108' 'View' > Next.
If anyone could advice and point us in the right direction this would help massively, also as we are new to AngularJS if you see anything else that we are doing wrongly please point it out.
Thank you.
// Product Type
.controller('warrantyCtrl', function($scope, $http, $stateParams) {
$scope.params = $stateParams.jobID[0];
$scope.dataLoaded = false;
$http({
url: 'http://jsonstub.com/warranty/' + $scope.params,
method: 'GET',
dataType: 'json',
data: '',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://run.plnkr.co',
'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
}
}).success(function(data, status, headers, config) {
$scope.warrantydata = data;
$scope.dataLoaded = true;
}).error(function(data, status, error, config) {
$scope.warrantydata = [{
heading: "Error",
description: "Could not load json data"
}];
$scope.dataLoaded = false;
});
$scope.formData = {
'jobID': $scope.params
};
// Product Type Select
$scope.products = [{
id: '1',
name: 'Petrol Lawnmower'
}, {
id: '2',
name: 'Electric Lawnmower'
}, {
id: '3',
name: 'Petrol Chainsaw'
}, {
id: '4',
name: 'Electric Chainsaw'
}, {
id: '5',
name: 'Petrol Timmer'
}, {
id: '6',
name: 'Electric Timmer'
}, {
id: '7',
name: 'Etc'
}];
})
// Product Data
.controller('warrantyFormProductType', function($scope, $http, $stateParams) {
$scope.productid = $stateParams.jobID[0];
$http({
url: 'http://jsonstub.com/producttype/' + $scope.productid, // This needs to be productType id
method: 'GET',
dataType: 'json',
data: '',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://run.plnkr.co',
'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
}
}).success(function(data, status, headers, config) {
$scope.productdata = data;
}).error(function(data, status, error, config) {
$scope.productdata = [{
heading: "Error",
description: "Could not load json data"
}];
})
// Add / Remove Columns (Still working on)
$scope.removeRow = function(index) {
$scope.productdata.splice(index, 1);
if ($scope.productdata.length() === 0) {
$scope.productdata = [];
}
};
$scope.addRow = function() {
var newrow = [];
if ($scope.productdata.length === 0) {
newrow = [{
'en': ''
}];
} else {
$scope.productdata[0].forEach(function(row) {
newrow.push({
'en': ''
});
});
}
$scope.productdata.push(newrow);
};
});

Answer 1

Is your API request supposed to be like this http://jsonstub.com/2/1 ?
Assuming yes, I've updated the code here
But I am getting Error 400 for this request.
Take a look and comment if this is what you needed.