Accessing an Api through custom directives - angularjs

Question

I am able to get only 10 objects while accessing an api and nothing through custom directive.Can anyone suggest something?
Below is the code. Can anyone help? The specialCard directive is not accessing data below.
mainView.html
<div class="panel panel-primary col-sm-offset-2 col-xs-12 col-sm-8">
<special-card></special-card>
</div>
</div>
postcard.html
<div class="post-preview" ng-repeat="book in BooksData">
<div class="panel panel-primary col-sm-offset-2 col-xs-12 col-sm-8">
<div class="panel-heading"> <h4>Book - {{book.name}}</h4></div>
<div class="panel-body">
<div>Author - <em>{{ book.authors[0] }}</em> </div>
<div>Publisher - <em>{{ book.publisher}}</em> </div>
<div>ISBN - <em>{{ book.isbn}}</em> </div>
<br>
<a class="btn btn-primary" ng-href="#/{{type}}/{{book.isbn}}"> Details</a>
</div>
</div>
</div>
</div>
app.js
var myApp = angular.module('blogApp', ['ngRoute']);
myApp.directive("specialCard",function(){
return{
restrict : "E",
templateURL : "views/post-card.html",
controller : function($scope){
}
}
});
myApp.controller('mainController',['$http','$scope',function($http,$scope) {
$http.get('https://anapioficeandfire.com/api/books').success(function(data){
$scope.BooksData= data;
console.log($scope.BooksData);
});
}]);
myApp.controller('characController',['$http','$scope',function($http,$scope) {
$http.get('https://www.anapioficeandfire.com/api/characters?page=1&pageSize=20').success(function(data1){
$scope.charData= data1;
console.log($scope.charData);
});
}]);
myApp.controller('houseController',['$http','$scope',function($http,$scope) {
$http.get('https://anapioficeandfire.com/api/houses?page=1&pageSize=20').success(function(data2){
$scope.houseData= data2;
console.log($scope.houseData);
});
}]);
Routes
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
// Which controller it should use
controller : 'mainController',
// what is the alias of that controller.
controllerAs : 'main'
})
.when('/books',{
templateUrl : 'views/mainView.html',
controller : 'mainController',
controllerAs : 'main'
})
otherwise(
{
//redirectTo:'/'
template : '<h1>404 page not found</h1>'
}
);
}]);

Answer 1

It's impossible to help you with a such question.
Firstly, please follow the recommandations of this article: How do I ask a good question?
Then don't paste any links to GitHub repo, provide code directly in the question (and properly formatted) with some examples if you can (demo on Plunkr, Jsfiddle, etc.)