Simple angular app - Shopping website In looking for a bit of feedback about an Angular app I have created.

I'm new to angular I want to clean up the loose ends before I carry on and add new functionality.

Below is the code snippet of index.html which includes custom directives that includes a block of HTML and various angular elements

It also includes a $http service to fetch Json from an external file

&lt;body ng-controller="StoreController as store"&gt;
&lt;script type="text/javascript" src="angular.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="product.directives.js"&gt;&lt;/script&gt;

&lt;h1 class="text-center"&gt;{{store.title}}&lt;/h1&gt;
&lt;ul class="list-group container"&gt;
    &lt;li class="list-group-item col-sm-12" ng-repeat="product in store.products "&gt;
        &lt;h1&gt;
            &lt;product-title&gt;&lt;/product-title&gt;
        &lt;/h1&gt;
        &lt;img ng-src="{{product.images[0].full}}" /&gt;
        &lt;p ng-hide="product.canPurchase"&gt;Item is not available for purchase&lt;/p&gt;
        &lt;button ng-show="product.canPurchase"&gt;Add to cart&lt;/button&gt;
        &lt;product-panels&gt;&lt;/product-panels&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;


This is my app.js which contains the controllers

var app = angular.module('store', ['store-products']);

app.controller("ReviewController", function () {
// New review array slot is created and assigned blank
this.review = {};

// Form triggers function to push new review slot into array
this.addReview = function (product) {
    product.reviews.push(this.review);
    // Set the review form to blank again
    this.review = {};
}
});

app.controller('StoreController', ['$http', function ($http) {
this.title = "Angular App";
    console.log('test');
var store = this;
//store.products = [];

$http.get('/products.json').then(function (response) {
    console.log(response);
    store.products = response.data;
});
}]);


and finally here is my directives.js. with the logic being stored in external html files.

var app = angular.module('store-products', []);

app.directive('productPanels', function () {

return {
    restrict: 'E',
    templateUrl: 'product-panels.html',
    controller: function () {

        this.tab = 1;

        this.selectTab = function (setTab) {
            this.tab = setTab;
        }

        this.isSelected = function (checkTab) {
            return this.tab === checkTab;
        }

    },
    controllerAs: 'panel',
};
});

app.directive('productTitle', function () {

return {
    restrict: 'EA',
    templateUrl: 'product-title.html'
};
});
I noticed that you have a spot for controllers, but then in your directive you declare a function for the Controller Attribute instead of using a controller that you have already at your disposal from the controller's section.  

I would think that you would want to be able to reuse that function that controls tab selection, you should create a controller for that so that you can reuse it on several pages, rather than write from scratch every time you create a page with Panel tabs.