Директива не загружается и ошибка не отображается

Question

У меня есть fork из Tabs в библиотеке ui-bootstrap, и другая директива, которая преобразует директиву Tab, также у меня есть другой модуль, который интерпретируется как второе приложение в моем основном приложении, но когда я связал обе директивы со вторым модулем, ничего не рендерится Если я вернусь к основному приложению и вставлю те, что там все работает нормально, так что любая идея, почему я не получаю ошибку, когда директивы вводятся во второй модуль, я хочу сделать это из-за шаблона модуля и разделения проблем,

Почему я не получаю никакой ошибки?

ОБНОВИТЬ
Благодаря ответу Jugnu, что решает проблему разделения двух модулей и загрузки их вручную:

//this is your module1 functionality
var module1 = angular.module('module1', []);
module1.directive('module1Directive', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        alert('Im module1')
      });
    }
  }
});

module1.controller('Module1Ctrl', ['$scope',
  function($scope) {
    $scope.lable = 'module 1';
  }
]);

//this is your module2 functionality
var module2 = angular.module('module2', []);
module2.directive('module2Directive', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        alert('Im module2')
      });
    }
  }
});

module2.controller('Module2Ctrl', ['$scope',
  function($scope) {
    $scope.lable = 'module 2';
  }
]);


window.onload = function() {
  //remove ng-app and bootstrap your app manully
  angular.bootstrap(document.getElementById('module1'), ['module1', 'module2']);
  angular.bootstrap(document.getElementById('module2'), ['module1', 'module2']);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div id="module1" ng-controller="Module1Ctrl">
  <label>{{lable}}</label>
  <div>
    <button module1-directive>Module1 directive</button>
  </div>
  <div>
    <button module2-directive>Module2 directive</button>
  </div>
</div>
<hr>
<div id="module2" ng-controller="Module2Ctrl">
  <label>{{lable}}</label>
  <div>
    <button module1-directive>Module1 directive</button>
  </div>
  <div>
    <button module2-directive>Module2 directive</button>
  </div>
</div>