title: Unit testing AngularJS Directive with isolated scope - how to get bindings to output?
body: <p>I'm really needing advice and guidance on testing AngularJS directives with Isolated Scope. </p>
  
  <p>Say I have the following directive (which works):</p>
  
  <pre><code>angular.module('myApp')
  
      .directive('pageNav', function() {
          return {
              restrict: 'A',
              scope: {
                  title: '@'
              },
              transclude: true,
              templateUrl: 'pageNav.html',
              link: function(scope, element, attrs) {
                  if (attrs.pageNav == 'translucent') {
                      element.find('nav').addClass('newClass');
                  }
               }
          };
      })
  ;
  </code></pre>
  
  <p>This is the template URL code:</p>
  
  <pre><code>&lt;nav class="pageNav"&gt;
      &lt;div class="content"&gt;
          &lt;h1 ng-if="title"&gt;{{ title }}&lt;/h1&gt;
  
          &lt;div class="contentRight" ng-transclude&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>now I have the following test</p>
  
  <pre><code>describe('Page Nav Directive', function() {
  
      var $scope,
          element;
  
      beforeEach(module('myApp'));
      beforeEach(module('pageNav.html'));
  
      beforeEach(inject(function($compile, $rootScope) {
          $scope = $rootScope;
          $scope.title = "hey hey, my my";
          element = angular.element('&lt;div page-nav&gt;&lt;/div&gt;');
          // element = angular.element('&lt;div page-nav title="hey hey, my my"&gt;&lt;/div&gt;');
          $compile(element)($scope);
  
          $scope.$digest();
      }));
  
      it('should render the directive', function() {
         // this test will fail if I un-comment the element above
         expect(element.find('div').eq(1).attr('class')).toBe('contentRight');
      });
  
      it('should render a title', function() {
          // this test will pass if I un-comment the element above
         expect(element.find('h1').eq(0).text()).toBe('hey hey, my my');
      });
  
  })
  
  ;
  </code></pre>
  
  <p>Now I don't understand why the second test fails with the first element even though I have set the <code>$scope.title</code> (for some reason the binding <code>{{ title }}</code> isn't rendered). Now if I put the <code>$scope.title</code> on the element as an attribute the second test will pass as the rendering works, but the first test fails? I even changed the first test to </p>
  
  <pre><code>expect(element.scope().find('div').eq(1).attr('class')).toBe('contentRight');
  </code></pre>
  
  <p>when using the I put the <code>$scope.title</code> on the element as an attribute however this failed too.</p>
  
  <p>I am finding little or no good documentation on testing AngularJS Directives with isolated scopes and I am pulling my hair out. Any guidance, info or explanations to the problems I have would be most appreciated.</p>