Simple AngularJS UI-Router List/Detail View

app.js

angular.module('routerApp', ['ui.router']);

.config(function($stateProvider, $urlRouterProvider){
  
  $stateProvider
    .state('beatles', {
        abstract: true,
        url: '/beatles',
        templateUrl: 'beattles.html'
    })
    .state('beatles.list', {
        url: '/list',
        // loaded into ui-view of parent's template
        templateUrl: 'list.html',
        controller: 'listController'
    })
    .state('beatles.detail', {
        url: '/:id',
        // loaded into ui-view of parent's template
        templateUrl: 'detail.html',
        controller: 'listController'
    })
})

controller.js

angular.module('routerApp', ['ui.router']);.controller('listController', ['$scope', '$http', '$state', '$location', function($scope, $http, $state, $location) {
    $http.get('data.json').success(function(data){
      $scope.thisAlbum = $state.params.id;
      $scope.albums = data;
    });
}]);

detail.html

<div class="nav">
  <a href="#/">Back to Full Album List</a>
</div>
<div class="albumDetail" ng-repeat="album in albums | filter: {id: thisAlbum}">
  <h2>{{album.album}}</h2>
  <span>{{album.date}}</span>
  <p>{{album.desc}}</p>
</div>

list.html

<div class="col-sm-4 album" ng-repeat="album in albums">
    <div>
      <a href="#/beatles/{{album.id}}"></a>
      <h2>{{album.album}}</h2>
      <p>{{album.date}}</p>
    </div>
  </div>