title: Unit test for my AngularJS directive fails with "TypeError: Cannot read property 'config' of undefined"
body: <p>I have the following definition object for directive "krnGrid":</p>
  
  <pre><code>return {
      restrict: 'E',
      replace: true,
      template: '&lt;div&gt;&lt;/div&gt;',
      scope: {
          'options': '=',
          'gridModel': '=',
          'stateModel': '='
      },
      link: function (scope, element, attrs, controller) {
          var options = _getDefaultOptions();
          options = angular.extend(options, scope.options);
          options = optionsFactory.gatherOptions(scope, options, element, attrs);
  
          var events = options.events;
          delete options['events'];
          angular.forEach(events, function (fn, name) {
              element.bind(name, fn);
          });
  
          //watch configuration object for modifications 
          scope.$watch('gridModel.config', function (newvalue, oldvalue) {
              if (newvalue !== oldvalue) {
                  //initialize grid with new configuration options
                  _initGrid(scope, element, newvalue.config, options);
  
              }
          }, true)
  
          //watch data object for any data updates
          scope.$watch('gridModel.data', function (newvalue, oldvalue) {
              if (newvalue !== oldvalue) {
                  //update grid with new data
                  _reloadGrid(scope, element, newvalue.data);
              }
          }, true)
  
          if (scope.gridModel.config.url &amp;&amp; scope.gridModel.config.url != '') {
              //load config data from server - TODO - this needs to be a configuration option - need to load data or not should be decided by user
              //scope.gridModel.config.loadConfiguration();
          }
  
          if (scope.gridModel.data.url &amp;&amp; scope.gridModel.data.url != '') {
              //load config data from server - TODO - this needs to be a configuration option
              //scope.gridModel.data.getData();
          }
  
          _initGrid(scope, element, scope.gridModel.config.config, options);
          _reloadGrid(scope, element, scope.gridModel.data.data)
  
          var gridObj = element.data().jqxGrid.instance
          scope.stateModel.gridObj = gridObj;
  
      }
  };
  </code></pre>
  
  <p>My unit test is as follows:</p>
  
  <pre><code>define("angular-infra/tests/directives/GridDirectiveSpec", ['angular', 'jquery', 'i18n', 'angular-mocks', 'angular-infra/js/directives/Grid'],
  
  function (angular, $) {
  
      describe("Unit testing grid directive", function () {
  
          var compile;
          var scope;
  
          beforeEach(module('html.infrastructure.components'));
  
          beforeEach(inject(function ($compile, $rootScope) {
              compile = $compile;
              scope = $rootScope;
          }));
  
          it('Replaces the element with the appropriate content', function () {
              scope.gridModel = {
                  config: {},
                  data: {}
              };
              var element = compile('&lt;krn-grid gridModel="gridModel"&gt;&lt;/krn-grid&gt;')(scope);
              scope.$digest();
              // Following assertion is intentional. Test never reaches this point
              expect(true).toBe(true);
          });
  
      });
  });
  </code></pre>
  
  <p>The above unit test fails with the following error message:</p>
  
  <pre><code>Chrome 29.0.1547 (Windows 7) Unit testing grid directive Replaces the element with the appropriate content FAILED
      TypeError: Cannot read property 'config' of undefined
          at link (C:/Kronos/wfc/applications/navigator/html5/angular-infra/js/directives/Grid.js:266:24)
          at nodeLinkFn (C:/Kronos/wfc/applications/navigator/html5/thirdparty/js/angular/angular.js:4222:13)
          at compositeLinkFn (C:/Kronos/wfc/applications/navigator/html5/thirdparty/js/angular/angular.js:3834:14)
          at C:/Kronos/wfc/applications/navigator/html5/thirdparty/js/angular/angular.js:3746:30
          at null.&lt;anonymous&gt; (C:/Kronos/wfc/applications/navigator/html5/angular-infra/tests/directives/GridDirectiveSpec.js:73:81)
  </code></pre>
  
  <p>I'm not able to figure out the cause of this problem. I'm clearly setting the gridModel object in scope in the test.</p>
  
  <p>Does it have anything to do with the isolate scope of the directive? If so, what changes should I make to fix the test?</p>