指令未加载且未显示错误

Question

我在ui-bootstrap库的Tabs上有一个fork，另一个转换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>