I have been slowly integrating Onsen UI with an existing web app of mine.

My home page file (index.jade) contains a splitter which enables navigation throughout the app. The splitter loads a NodeJS route which renders the requested page in jade. Everything up to this point works as intended (really just all my front end jade code being rendered correctly). Each page of the splitter is stored in a separate jade file (with the exception of the home page).

***The Problem:*** 

By configuring my app this way, I have learned through trial and error that all my javascripts in all my jade files are no longer being rendered with the jade code (I do not know the correct terminology). I can only get my javascripts to work if I either cut-and-paste them to index.jade, or create separate javascript files and include them in index.jade. 

This is a problem in and of itself (although I can work around it by doing the above), but it is the cause of my main problem: it breaks my PayPal script on one of my pages. 

Before the integration of Onsen UI, I was successfully using the PayPal incontext checkout in my app. 

***Code Samples:***

This is how I was implementing PayPal in one of my views before I started integrating Onsen UI:

```
//- the following is for In-Context PayPal checkout ********************
  div(ng-show="viewEvent && viewEvent.spacesAvailable > 0")
    br
    label(ng-show='eventStatus === 1') This event is being hosted by you! You can not RSVP.  
    label(ng-show='eventStatus === 2') You have RSVP'd for this event, but have not payed.
    label(ng-show='eventStatus === 3') You have already payed for this event.
    label(ng-show='eventStatus === 4') RSVP
    form#myContainer(ng-show='eventStatus === 2 || eventStatus === 4' action="{{'https://10.0.0.25:8001/checkout/' + user._id + '/' + viewEvent._id + '/' + viewEvent.eventName + '/' + viewEvent.price}}" ng-click='rsvp(user._id, viewEvent._id);' method='get')
    script.
      window.paypalCheckoutReady = function () {
        paypal.checkout.setup("**redacted**", {
          environment: "sandbox",
          container: "myContainer"
        });
      };
    script(src='//www.paypalobjects.com/api/checkout.js', async)

```

I just put the script in there, everything loaded correctly, and I was able to make a purchase with PayPal's incontext checkout.
However, now I can not insert the script like that. I've changed my code to this:

```
//- the following is for In-Context PayPal checkout ********************
  div(ng-if="viewEvent && viewEvent.spacesAvailable > 0")
    br
    label(ng-show='eventStatus === 1') This event is being hosted by you! You can not RSVP.  
    label(ng-show='eventStatus === 2') You have RSVP'd for this event, but have not payed.
    label(ng-show='eventStatus === 3') You have already payed for this event.
    label(ng-show='eventStatus === 4') RSVP
    form#myContainer(ng-show='eventStatus === 2 || eventStatus === 4' action="{{'https://10.0.0.25:8001/checkout/' + user._id + '/' + viewEvent._id + '/' + viewEvent.eventName + '/' + viewEvent.price}}" ng-click='rsvp(user._id, viewEvent._id);' method='get')
    div(ng-init='openPayPal()')

```

The last div calls a function in the angular controller, openPayPal(), which calls a function in the javascript file that is being included in index.jade:

```
function openPayPal() {
  window.paypalCheckoutReady = function () {
    paypal.checkout.setup("**redacted**", {
      environment: "sandbox",
      container: "myContainer"
    });
  };
}

```

Additionally, the PayPal script:

```
script(src='//www.paypalobjects.com/api/checkout.js', async)

```

is now included in index.jade.

So after doing all this, the PayPal button does not even appear. I believe this is because I am doing something wrong with the scripts. 

I am out of ideas.

Does anyone know how to implement this, or know what I am doing wrong?

Additionally, does anyone know a work around to include javascript in my jade files?

Thank you all for your time.

***UPDATE*** 

If I go to index.jade, delete EVERYTHING below body (including the splitter that loads the page where the PayPal button does not work), and paste the following code, then the PayPal button shows up like it is supposed to (like it used to before I started integrating Onsen UI).

```
form#myContainer(action='*deleted for now*' method='get')
script.
  window.paypalCheckoutReady = function () {
    paypal.checkout.setup("*redacted*", {
      environment: "sandbox",
      container: "myContainer"
    });
  };
script(src='//www.paypalobjects.com/api/checkout.js' async)

```

***UPDATE 2 FOR SOLUTION***

I am having trouble loading the script dynamically from my controller. Here is what is in search.jade:

```
  //- the following is for In-Context PayPal checkout ********************
  div(ng-show="viewEvent && viewEvent.spacesAvailable > 0")
    br
    label(ng-show='eventStatus === 1') This event is being hosted by you! You can not RSVP.  
    label(ng-show='eventStatus === 2') You have RSVP'd for this event, but have not payed.
    label(ng-show='eventStatus === 3') You have already payed for this event.
    label(ng-show='eventStatus === 4') RSVP
    form#myContainer(on-load='controller.openPayPalPlease()' ng-show='eventStatus === 2 || eventStatus === 4' action="{{'https://10.0.0.25:8001/checkout/' + user._id + '/' + viewEvent._id + '/' + viewEvent.eventName + '/' + viewEvent.price}}" ng-click='rsvp(user._id, viewEvent._id);' method='get')

```

and here is my angular function in the controller:

```
this.openPayPalPlease = function() {
    window.paypalCheckoutReady = function () {
      paypal.checkout.setup("H6LX5CJXEQYEL", {
        environment: "sandbox",
        container: "myContainer"
      });
    };

    var s = document.createElement('script');
    s.setAttribute('src', '//www.paypalobjects.com/api/checkout.js');
    document.getElementById('myContainer').appendChild(s);
  };

```

Notice how I am calling the angular function with *on-load* in the PayPal form in the jade file. Without using *on-load*, and placing this div under the PayPal form, 

```
div(ng-init='controller.openPayPalPlease()')

```

I receive the error:

> 
> Cannot read property 'appendChild' of null at openPayPalPlease
> 
> 
> 

Using on-load, nothing happens, and the script does not get loaded.