JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Page" >
    <div header>
    </div>
<div>

JavaScript

//your init.js
var init = {
    modules: []
}

// your custom Header include e.g. header_customers.js
angular.module("HeaderApp1", []).directive("header", function() {
    return {
        template:'<div ng-controller="HeaderApp1Ctrl"><ul><li ng-repeat="item in menu">{{item.title}}</li></ul></div>',
    //templateUrl: 'myHeaderApp1Template.html' // <- you want to use this @home ;)
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
 
                },
                post: function postLink(scope, iElement, iAttrs, controller) {

                }
            }
        },
        link: function postLink(scope, iElement, iAttrs) {
        
        }
    }
}).controller('HeaderApp1Ctrl', function($scope) {
    $scope.menu = [{
        "title": "Item1",
        "url": "#"},
    {
        "title": "Item2",
        "url": "#"},
    {
        "title": "Item3",
        "url": "#"}]
});
init.modules.push("HeaderApp1");


// your Page init at last
angular.module("Page", init.modules);