Angularjs: Using routing - the custom directive is not compiled or not recognized

I have custom directive which is not updating in the template when routing is called/done. Below is the code: module.js

    angular.module('bookApp', [])
       .config(['$routeProvider', function($routeProvider) {
           $routeProvider.when('/bookList', {
             templateUrl: 'bookList.html',
             controller: BookCntrl
            })
            .otherwise({ redirectTo: '/' });
           }
        ])
        .directive('bookDialog', function(){
             return {
                restrict: 'A',
                replace: true,
                transclude: true,
                scope: { title:'@bookTitle' },
                template: '<div>' +
                      '<div class="title">{{title}}</div>' +
                      '<div class="body" ng-transclude></div>' +
                      '</div>'};
        });
    function BookCntrl($scope) {
           //todo
    };

in bookList.html i have

    <div book-dialog bookTitle="Computer Science">
        Description will come here
    </div>

when I run this and goto http://localhost:8080/bookApp/#/bookList. It does not render/detect the directive and ng-view gets updated but custom directives remains as it is with no change.

Please help me on the issue. May be I am not getting it, what i missing here in the code. Thanks in advance.