ProductListItemComponent.js

 app.component('productListItem',
    {
        template: '<div class="col-sm-6 col-md-4"><h3>{{$ctrl.product.id}}</h3><p>{{$ctrl.product.name}}</p><button>Add to basket</button></div>',
        restrict: 'E',
        require: {
            parent: '^productsList'
        },
        bindings: {
            product: '<',
        }
    });