How to enable a disabled button in Jasmine manually?

I am facing an annoying problem. I am trying to test a directive with a form. What I want to do is just enable a button by filling out the form manually and see if the button is enabled, click on it and spy on the function that should be called. I am able to set the values for the in put field and then do a $rootScope.$apply(). When I log the values of the input fields after that, it seems the values are correct, but the button is not enabled. Thanks in advance for any suggestions.

This is how my code looks like now.

HTML Template:

<div class="row row-buffer">
  <form model="rangeRow.model" validator="RangeValue" name="rangeValueForm" class="form-horizontal">
    <div class="col-xs-1"><b class="pull-right">#{{rangeRow.number}}</b></div>
    <div class="col-xs-2" ng-class="{'has-error': rangeValueForm.from.$invalid && (rangeValueForm.from.$touched || rangeValueForm.from.$dirty)}">
      <input class="form-control" ng-model="rangeRow.model.from"/>
    </div>
    <div class="col-xs-2" ng-class="{'has-error': rangeValueForm.until.$invalid && (rangeValueForm.until.$touched || rangeValueForm.until.$dirty)}">
      <input class="form-control" ng-model="rangeRow.model.until"/>
    </div>
    <div class="col-xs-2" ng-class="{'has-error': rangeValueForm.value.$invalid && (rangeValueForm.value.$touched || rangeValueForm.value.$dirty)}">
      <input class="form-control" ng-model="rangeRow.model.value"/>
    </div>
    <div class="col-xs-2">
      <div class="row">
        <div class="col-xs-6">
          <button ng-click="rangeRow.saveClicked()" class="btn btn-primary pull-right" ng-disabled="rangeValueForm.$invalid || rangeValueForm.$pristine">
            <i class="fa fa-hdd-o"></i>
            <span translate>ROW.SAVE</span>
          </button>
        </div>
        <div class="col-xs-6">
          <button ng-click="rangeRow.deleteClicked()" class="btn btn-danger" ng-hide="rangeRow.isNew()">
            <i class="fa fa-trash-o"></i>
            <span translate>ROW.DELETE</span>
          </button>
        </div>
      </div>
    </div>
  </form>
</div>

Test:

'use strict';

describe('Directive: rangeRow', function () {

  // load the directive's module
  beforeEach(module('knApp'));

  // load the view templates
  beforeEach(module('es6/directives/range-row/range-row.html'));

  const template = `
    <range-row 
      kn-model="controller.value" 
      number="1" 
      on-save="controller.saveValue(value)" 
      on-delete="controller.deleteValue(value)">
    </range-row>
  `;

  var $rootScope;
  var $compile;

  var element;
  var scope;
  var form;

  beforeEach(inject(function (_$rootScope_, _$compile_, $state) {

    $compile = _$compile_;
    $rootScope = _$rootScope_;

    scope = $rootScope.$new();

    scope.controller = { 
      saveValue: _.noop, 
      deleteValue: _.noop, 
      value: { id: 42 } 
    };

    element = angular.element(template);
    element = $compile(element)(scope);
    $rootScope.$apply();

    form = element.isolateScope().rangeValueForm;

  }));

  it ('should save the row when "save" is clicked', function () {
    var from = element.find('input')[0];
    var until = element.find('input')[1];
    var value = element.find('input')[2];

    from.value = 1;
    until.value = 2;
    value.value = 3;

    $rootScope.$apply();

    var saveButton = element.find('button')[0];

    expect($(saveButton).attr('disabled')).toBeFalsy();

    spyOn(scope.controller, 'saveValue');

    element.find('button')[0].click();

    expect(scope.controller.saveValue.calls.count()).toBe(1);
  });