Как передать объект в шаблонную функцию компонента в angularjs

Question

У меня есть проект angularjs 1.7.x, в котором я использовал компонент для добавления изображения и ссылок на страницу веб-сайта, как показано ниже:

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>';
    }
});

И использовал этот компонент следующим образом:

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

Вы можете увидеть этот пример кода в plunker

Теперь мне нужно получить доступ к переданному объекту, который используется в шаблоне компонента, но яхотите до времени компиляции шаблона.Я использовал $attrs в шаблонной функции, но он получит значение объекта в виде строки!помогите мне решить эту проблему или используйте другой способ добавить мои шаблоны до времени компиляции и в соответствии с переданными объектами.