interact with angularjs elements using javascript

[Pedro Bakster]

I am working on a browser extension that will automatically apply a gift card. I have to interact with the input fields and buttons using javascript only knowing the document element. My code for interacting with the angular html does not seem to register. I cannot apply the gift card on the page.  What is the proper way to interact with the angular items from javascript if I am starting with only the document.element for those items? My attempts that do not work are below:

There are three document elements which are angular elements.   
1. A gift card number input field: cardInput   
2. A gift card pin number field: codeInput   
3. An apply button: applyButton   

I am trying to fill in the cardInput field, the codeInput field and click the applyButton starting with only the document elements.

I fill in the fields using the following code, but I'm not sure if this is the correct way to interact with angular. The field does seem to get filled in though.

        if(angular){
    cardInput.value=1234567890;
        e=angular.element(cardInput);
        e.trigger("input");
        e.scope().$apply();
        }

I press the applyButton with the following code but it does not seem to register with angular

    if(angular){
    //applyButton.click();
    var e = angular.element(applyButton);
    e.trigger('click');
    e.scope().$apply();
    }


Here is the angular html code for the applyButton

    <input value="Apply" class="apply button gift-card-apply" data-ng-click="!orderSubmitErrors.giftCard.sectionHasErrors &amp;&amp; applyGiftCard($event)" client-validation="onSubmit,giftCard,validateSubsection" type="button">



and the angular html code for the card input field

    <input class="ng-valid ng-dirty" maxlength="16" restrict-numbers="" data-ng-model="tenderedCardInfo.giftCardNumber" pattern="[0-9]*" client-validation="onExit" data-required-in-nonempty-group="" data-required-on-apply="" data-subsection="giftCard" data-combo-field="" focus-me="focusMeFields.focusOnGiftCardNumber" type="text">

What is the proper way to interact with the angular items from javascript if I am starting with only the document.element for those items.

[Sander Elias]

Hi Pedro,

Just fill in the form elements you need, and triggering a click should be enough. If not, you might try triggering an $apply on the entire app. seek down the root node of the app, and user the angular(el).scope().$apply() on that. If that doesn't work, contact the builder of the app.

Regards

Sander.