title: AngularJS Unit Test Directive with Input
body: <p>I am using Angular v1.6 with Jasmine and I'm trying to unit test a working directive in our angular application by entering an input value but I cannot get the directive to fire properly.</p>
  
  <p>Directive</p>
  
  <pre><code>.directive('percentage', function() {
          return {
              restrict: 'A',
              require: 'ngModel',
              link: function(scope, element, attr, ngModel) {
  
                  function fromUser(value) {
                      return value / 100;
                  }
  
                  function toUser(value) {
                      return Math.round(value * 100);
                  }
                  ngModel.$parsers.push(fromUser);
                  ngModel.$formatters.push(toUser);
              }
          };
      })
  </code></pre>
  
  <p>Unit Test</p>
  
  <pre><code>describe('percentageDirective', function() {
    beforeEach(module('app'));
  
        // Inject $rootScope and $compile
        var scope, element;
        beforeEach(inject(function($rootScope, $compile) {
          // Set up the scope with test data
          scope = $rootScope.$new();
  
          scope.value = 0;
  
          // Create an element
          element = angular.element('&lt;input type="number" percentage ng-model="value"&gt;&lt;/input&gt;');
  
          // Compile that element with your scope
          element = $compile(element)(scope);
  
          // Run the digest cycle to compile the element
          $rootScope.$digest();
  
          // Find the input control: 
          var dirElementInput = element.find('input');
  
          // Set some text
          angular.element(dirElementInput).val('25').triggerHandler('input');
  
          scope.$apply();
        }));
  
        it("should display the decimal value", function() {
          expect(scope.value).toEqual('0.25');
        });
  });
  </code></pre>
  
  <p>The scope value never changes and remains at 0. Can someone help on how to trigger the input change?</p>