How to work with .component() of Angular.js?

Question

Angular

I am making an online store. Backend on Laravel 5.2 +
LaravelShoppingcart
I decided to try to do everything through .component()
There are two questions:
1) How to organize cart. I understand that it will be .factory()
In the product-list and product-detail components there will be an add to cart button. The data will go to the backend + will be stored in angular cookies (as I think). But let's say, as in most stores, there will be a mini-basket in the header. Which should be updated. And when changing the route, always show the number of goods. And there will also be a route ala /checkout/ where there will be a list of goods in the basket, etc.
And so the question is, what is needed for this? One service that will be injected into the product components and into separate components cart-component and checkout-component ?
Let me know if I'm thinking correctly and what I missed.
2) Can a directive be used inside a component? For example pagination. Now I have it like this

'use strict';

angular.
module('productList').
component('productList', {
    templateUrl: 'views/app/product-list/product-list.template.html',
    controller: ['Product',
        function ProductsListController(Product) {
            var self = this;
            self.products = [];
            self.getPosts = function(pageNumber){
                if(pageNumber===undefined){
                    pageNumber = '1';
                }
                Product.get({page: pageNumber},function(response){
                    self.products     = response.data;
                    self.totalPages   = response.last_page;
                    self.currentPage  = response.current_page;

                    // Pagination Range
                    var pages = [];

                    for(var i=1;i<=response.last_page;i++) {
                        pages.push(i);
                    }

                    self.range = pages;

                });

            };
            this.getPosts();
            this.orderProp = 'price';
        }
    ]
});

And in the ng-include view like this

<ul class="pagination">
    <li ng-show="$ctrl.currentPage != 1"><a ng-click="$ctrl.getPosts(1)">&laquo;</a></li>
    <li ng-show="$ctrl.currentPage != 1"><a ng-click="$ctrl.getPosts($ctrl.currentPage-1)">&lsaquo; Prev</a></li>
    <li ng-repeat="i in range" ng-class="{active : currentPage == i}">
        <a ng-click="$ctrl.getPosts(i)">{{i}}</a>
    </li>
    <li ng-show="$ctrl.currentPage != $ctrl.totalPages"><a ng-click="$ctrl.getPosts($ctrl.currentPage+1)">Next &rsaquo;</a></li>
    <li ng-show="$ctrl.currentPage != $ctrl.totalPages"><a ng-click="$ctrl.getPosts($ctrl.totalPages)">&raquo;</a></li>
</ul>

But this will happen in many places. In the category, in the news, etc. I would like to just connect something like <

pagination-view data=$ctrl.products></pagination-view>

But on a clique in the directive that the component function yuzatsya.
Thank you.