AngularJS $routeParams / service not fetching data from JSON - angularjs

Question

On test-detail.html page (partial view), data from respective json files are not fetched/displayed, i.e. the controller TestDetailCtrl is called in test-detail.html (as can be seen on a working alert button), but params curly brackets in view (test-detail.html) are empty.
However ListController for test-list.html works and fetches the tests.json.
File structure:
index.html
(tests)
tests.json (content correctly displayed in test-list.html)
a.json
b.json
(js)
(partials)
(css)
partials/test-list.html:
<form action="" data-ng-repeat="test in tests | orderBy:orderProp">
<input type="checkbox" data-ng-model="item.selected" data-ng-change="change(item)">
<a href="#/tests/{{test.id}}">
<img data-ng-src="{{test.imageUrl}}" alt="{{test.name}}" class="test-thumb">
</a>
<a href="#/tests/{{test.id}}">
{{ test.name }}
</a><br />
</form>
partials/test-detail.html (where none of the data are displayed and all checkmarks are false):
<div class="main">
<img data-ng-src="{{mainImageUrl}}"/>
<h2>{{ test.name }}</h2>
<p>{{ test.description }}</p>
Customization:
<ul>
<li>Test items: {{test.customization.items | checkmark }}</li>
<li>Test duration: {{test.customization.duration | checkmark }}</li>
</ul>
</div>
route provider in js/app.js:
app.config(['$routeProvider',
{$routeProvider
.when('/tests',
{templateUrl: 'partials/test-list.html', controller: 'ListController'})
.when('/tests/:testId',
{templateUrl: 'partials/test-detail.html', controller: 'TestDetailCtrl'})
.otherwise({redirectTo: '/tests'});
}]);
RESTful handling with js/services.js:
var appServices;
appServices = angular.module('appServices', ['ngResource']);
appServices.factory('Test', ['$resource',
function($resource){
return $resource('tests/:testId.json', {}, {
query: {method:'GET', params:{testId:'tests'}, isArray:true}
});
}]);
controllers.js:
var ctr = angular.module('myApp.controller', []);
ctr.controller('ListController', ['$scope', 'Test', function ($scope, Test)
{$scope.tests = Test.query(); /*works*/
$scope.orderProp = 'duration';}]);
ctr.controller('TestDetailCtrl', ['$scope', '$routeParams', 'Test', function($scope, $routeParams, Test)
{$scope.$on('$routeChangeSuccess', function() {
$scope.test = Test.get({testId: $routeParams.testId}, function(test) {
$scope.mainImageUrl = test.screenshots[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
};
$scope.hello = function(name) {
alert('Test ' + (name || 'works' + '!')); /*works*/
}
})}
]);
Example test-a.json:
[{
id: "test-a",
name: "test a",
description: "text ... bla",
"customization": {
"items": true,
"duration": false}
}]

Answer 1

I think you are mixing aspx partials with angular-arrays here.
Angular ng-repeat will work on client side only and will evaluate your scope.tests array when it finishes loading.
Your aspx partial (test-detail.html) will probably work server-side and will depend on you data-binding it with a container.
Edit: Your test-a.json looks strange... why is it encapsulated with brackets? (Why is it an array?) The partials/test-a.html is not made for arrays. Try this JSON (test-a.json):
{
id: "test-a",
name: "test a",
description: "text ... bla",
"customization": {
"items": true,
"duration": false}
}