title: How to test directives in modularized angularjs scope?
body: <p>I am trying to test a directive which is defined in a sub-module of another submodule of the root module. I am unable to access the scope variables defined in the controller of the directive. The problem seems to lie in accessing the scope from inside the test.</p>
  
  <p>The main module is named <code>oppia</code> and it has a submodule named <code>stateEditorModule</code> and this submodule also has a submodule named <code>stateContentEditorModule</code>. I have tried injecting <code>$scope</code> instead of <code>$rootScope</code> but it doesn't seem to work.</p>
  
  <p>This is the test code:</p>
  
  <pre><code>  beforeEach(function() {
      module('oppia');
      module('stateEditorModule');
      module('stateContentEditorModule');
    });
  
      outerScope = $rootScope.$new();
      var elem = angular.element(
        '&lt;state-content-editor&gt;' +
        '&lt;/state-content-editor&gt;');
      var compiledElem = $compile(elem)(outerScope);
      outerScope.$digest();
      ctrlScope = compiledElem[0].getControllerScope();
    }));
  
    fit('should start with the content editor not being open', function() {
      expect(ctrlScope.contentEditorIsOpen).toBe(false);
    });
  
  </code></pre>
  
  <p>The <code>contentEditorIsOpen</code> variable is defined in the directive's scope.</p>
  
  <p>The <code>contentEditorIsOpen</code> is inaccessible with the current state of the code. </p>
  
  <p>I am stuck on this for a quite long and I would be grateful if someone could provide a solution or point to the documentation on how to test a multi-modular AngularJS app.</p>