Dynamically adding a url into a script tag in AngularJs
<p>I'm implementing a payment gateway into my SPA built with angularjs.</p>

<p>The problem is that this payment gateway requires you to include a script with a id of the payment.</p>

<p>this is my current setup....
(note the controller just runs some server-side script, it returns all information about the payment I just need to get the id)</p>

<p>Here is my controller:</p>

<pre><code>(function (){

var PaymentGateController = function ($scope, $rootScope, $state, paymentFactory, $sce) {

    $scope.ready = false;

    paymentFactory.getResult()
        .then(function (result) {
            $scope.ready = true;
            $scope.url = result.data.id;
        }, function(error) {
            console.log(error);
        });
}

PaymentGateController.$inject = ['$scope', '$rootScope','$state', 'paymentFactory', '$sce'];

angular.module('hcbcApp.paymentGate', []).controller('PaymentGateController', PaymentGateController);
}());
</code></pre>

<p>.. and here is my view:</p>

<pre><code>&lt;div ng-if="ready"&gt;
    &lt;form action="https://peachpayments.docs.oppwa.com/tutorials/integration-guide#" class="paymentWidgets"&gt;VISA MASTER AMEX&lt;/form&gt; 
    &lt;script type="text/javascript" src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={{url}}"&gt;&lt;/script&gt;
&lt;/div&gt;
</code></pre>