How to pass object to template function of component in angularjs

Question

I have a angularjs 1.7.x project which I used a component to add image and links in a page of website, like below:

angular.module('app', [])
.controller('MainCtrl', function MainCtrl() {
  this.book = {
    id: 12,
    name: 'Spawn'
  };
})
.component('smallBook', {
  bindings: {
    book: '<'
  },
  template: function($element, $attrs) {
      // here where is I need to use passed book object ...
      console.log("this.book", this.book); // book is undefined !???
      return '<span>Name: {{$ctrl.book.name}}</span>';
    }
});

And used that component in view like this:

<div ng-controller="MainCtrl as ctrl">
   <b>Book</b>
   <br>
   <small-book book="ctrl.book"></small-book>
</div>

You can see this sample code in plunker

Now I need to access passed object which is used in the component template, but I want it before template compile time. I used $attrs in template function but it will get the value of object as string! help me to solve this problem or use another way to inject my templates before compilation time and according by passed objects.