Error: [ng:areq] Argument 'detailsController' is not a function, got undefined - html

Question

I am trying to display the artist details when he or she is selected from a list but the error i get in my chrome console says that detailsController is not a function got undefined
list.html
<section class="artist">
<div class="search">
<h1>Artist Directory</h1>
<label>Search:</label>
<input ng-model="query" type="text" placeholder="Search for artists" autofocus/>
<p> </p>
<label class="formgroup"> by:
<select ng-model="artistOrder">
<option value="name">Name</option>
<option value="reknown">Reknown</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked/>ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse"/> descending
</label>
</div>
<ul class="artistlist">
<li class="artist cf" ng-repeat="artist in artists | filter: query | orderBy: artistOrder:direction">
<a href="#/details/{{artists.indexOf(artist)}}">
<img ng-src="images/{{artist.shortname}}_tn.jpg" alt=""/>
<div class="info">
<h2>{{artist.name }}</h2>
<h3>{{artist.reknown}}</h3>
</div>
</a>
</li>
</ul>
</section>
details.html
<section class="artistinfo">
<div class="artist cf" ng-model="artists">
<h1>{{artists[whichItem].name}}</h1>
<div class="info">
<h3>{{artists[whichItem].reknown}}</h3>
<img ng-src="images/{{artists[whichItem].shortname}}_tn.jpg" alt=""/>
<div class="bio">{{artists[whichItem].bio}}</div>
</div>
</div>
</section>
controllers.js
var artistControllers = angular.module('artistControllers', []);
artistControllers.controller('listController', ['$scope', '$http', function ($scope, $http) {
$http.get('js/data.json').success(function (data) {
$scope.artists = data;
$scope.artistOrder = "name"; // name is selected in orderby
});
}]);
artistControllers.controller('detailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.whichItem = $routeParams.itemId;
});
}]);
app.js
var myApp = angular.module('myApp',[
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/list', {
templateUrl: 'partials/list.html',
controller: 'listController'
}).
when('/details/:itemId', {
templateUrl:'partials/details.html',
controller:'detailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);