title: Angularjs Controller is not initialized
body: <p>I am working on on angularjs app and we need to integrate with another angularjs app.  On click of a button on first app modal window and its content should get it form app2.  I am trying below approach but app2 controller/module is not getting initialized.  Here is the error</p>
  
  <blockquote>
    <p>Error: [ng:areq] Argument 'AppTwoCtrl' is not a function, got
    undefined</p>
  </blockquote>
  
  <p>Here is the code snippet.  </p>
  
  <ol>
  <li><p>AppOneController.js    </p>
  
  <pre><code>//first module/controller
  define(['main'], function(ng, main) {  // we are using require.js and all controllers are declared in main.js
  angular.module('AppOne', ['ui.router', 'ui.bootstrap', 'ngRoute', 'ngAnimate'])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
   //stateprovider code
    $stateProvider.state('landing', {
        url: '/landing',
        templateUrl: '../landing/AppOne.html',
        controller: 'AppOneCtrl'
      });
  }
  controller('AppOneCtrl', ['$scope', '$rootScope', 'inventorySvc', function($scope, $rootScope, inventorySvc) {
  console.log('in the controller')
  
  $scope.add =  function () {
          var addVCGUrl = getBaseURL() + "/../../apptwo/landing/AppTwo.html";
              var add_node_Modal = $modal.open({
                  templateUrl: addVCGUrl,
                  size: 'sm',
                  backdrop : 'static',
                  resolve:{
                   //code here
                    },
                    modalTitle: function () {
                    // cod here
                    }
                  }
              });
          };
  }
  </code></pre>
  
  <p>/landing/AppOne.html   => html from the first app</p>
  
  <pre><code>  &lt;html ng-app="AppOne"&gt;
       &lt;div&gt;
          &lt;div ng-click="add()"&gt;
             &lt;div class="addVCG"&gt;Add&lt;/div&gt;  
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/html&gt;
  </code></pre>
  
  <ol start="2">
  <li>AppTwoController.js  </li>
  </ol></li>
  </ol>
  
  <p>// second module/controller</p>
  
  <pre><code>define(['main'], function(ng, main) {  // we are using require.js and all controllers are declared in main.js
  angular.module('AppTwo', ['ui.router', 'ui.bootstrap', 'ngRoute', 'ngAnimate'])
      .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
       //stateprovider code
        $stateProvider.state('landing', {
            url: '/landing',
            templateUrl: '../landing/AppTwo.html',
            controller: 'AppTwoCtrl'
          });
      }
  controller('AppTwoCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
      console.log('in the controller')
  }
  </code></pre>
  
  <p>/landing/AppTwo.html   </p>
  
  <pre><code>   &lt;!--html from the second app--&gt;
     &lt;html ng-app="AppTwo"&gt;
          &lt;div&gt;
             You are in App2 module and apptwo controller
          &lt;/div&gt;
      &lt;/html&gt;
  </code></pre>