title: Writing Unit test for Password Matching directive
body: <p>I have a directive here I'm trying to write a unit test for - first time doing this type of thing. I'm not sure how to go about it. Here's the directive code and HTML : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.directive('passwordMatch', [function () {
      return {
          restrict: 'A',
          scope:true,
          require: 'ngModel',
          link: function (scope, elem, attrs, control) {
              var checker = function () {
                  var e1 = scope.$eval(attrs.ngModel);
                  var e2 = scope.$eval(attrs.passwordMatch);
                  if(e2!=null)
                  return e1 == e2;
              };
              scope.$watch(checker, function (n) {
                  control.$setValidity("passwordNoMatch", n);
              });
          }
      };
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="signupForm"&gt;
  &lt;div class="form-group"&gt;
    
       &lt;div class="col-sm-7"&gt;
           &lt;span class="block input-icon input-icon-right"&gt;
       &lt;input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/&gt;
     &lt;/span&gt;
       &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="form-group"&gt; 
       &lt;div class="col-sm-7"&gt;
           &lt;span class="block input-icon input-icon-right"&gt;
        &lt;input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/&gt;                                
        &lt;small class="errorMessage" data-ng-show="signupForm.password2.$dirty &amp;&amp; signupForm.password2.$error.passwordNoMatch &amp;&amp; !signupForm.password2.$error.required"&gt; Password do not match.&lt;/small&gt;
     &lt;/span&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's what I'm trying for a test. So for, it is giving me an error reading TypeError: 'undefined' is not an object (evaluating 'scope.signup.password = '123'')</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>describe('passwordMatch Directive - ', function() {
      
      var scope, $compile, $window, element;
         
      beforeEach(function() {
        module('myApp');
        inject(function(_$compile_, _$rootScope_, _$window_) {
          $compile = _$compile_;
          scope = _$rootScope_.$new();
          $window = _$window_;
        })
       
      })
  
      it('should indicate invalid when the passwords do not match.', function() {
          scope.signup.password = '123';
          scope.signup.password2 = '1234';
          element = $compile(angular.element('&lt;input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/&gt; &lt;input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/&gt;'))(scope);
          scope.$apply();
          console.debug('element html - ' + element.html());
          expect(element.html().indexOf('ng-invalid')).toBeGreaterThan(0);
      });
  
      it('should indicate valid when the passwords do not match.', function() {
          scope.signup.password = '123';
          scope.signup.password2 = '123';
          element = $compile(angular.element('&lt;input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/&gt; &lt;input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/&gt;'))(scope);
          scope.$apply();
          console.debug('element html - ' + element.html());
          expect(element.html().indexOf('ng-valid')).toBeGreaterThan(0);
      });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Some help would be greatly appreciated </p>
  
  <p>EDIT: I just noticed when commenting out <code>scope.signup.password = '123'</code> and such, the debug statement does not return anything - just <code>DEBUG: 'element html - '</code>, so element.html() is not doing anything? </p>