Expressions Don't Show Data on Book Pages

[weyakin]

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/learn-angularjs/projects/angularjs_reader?link_content_target=interstitial_project

<In what way does your code behave incorrectly? Include ALL error messages.>
I got through steps 1-7. On step 8, you are supposed to create the BookController and individual book.html view. When I click on an individual book, the data shows the expression as I have typed it (ie: {{ book.title }}), instead of the actual data from the json file. I have looked over and over to make sure I’ve added everything correctly and can’t find the problem.

I’m attaching code for review. Please let me know if there is a step I missed or a typo that I’m completely blind at seeing. Thank you!

app.controller('BookController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
  // Your code here
  books.success(function(data) {
    $scope.book = data.books[$routeParams.bookId];
  });

  // Using this property to create the URL in line 9 of views/book.html
  $scope.currentBookIndex = parseInt($routeParams.bookId);
  
}]);

var app = angular.module('ReaderApp', ['ngRoute']);

app.config(function ($routeProvider) {
  $routeProvider
  .when('/books', {
    controller:'BookshelfController',
    templateUrl:'views/bookshelf.html'
  })
  .when('/books/:bookId', {
   	controller:'BookController',
    templateUrl:'views/book.html'
  })
  .otherwise({
    redirectTo:'/books'
  });
});

<a class="button back" href="#/books">Back</a>

<div class="book-detail">
  <!-- TODO: Add the book's cover here -->
  <h3 class="title">{{ book.title }}</h3>
  <p class="author">{{ book.author )}}</p>
  <p class="description">{{ book.description }}</p>

  <a class="button" href="#/books/{{ currentBookIndex }}/chapters/0">Read</a>
</div>