Iframe loaded twice


I have a shop app. In that app i have have a checkout form with a button that loads an iframe with payment options from server.

Somehow the page with the iframe triggers it twice and that makes the payment fail. Does anyone have a solution to this?

Simplified code:

<script id="cart.html" type="text/ng-template">    
<button class="button button-block button-energized" ng-click="purchase()">Purchase</button>

.controller("ShoppingCartCtrl", function($scope, $http, $ionicNavBarDelegate, $q, $state, restaurant, user){

      download_post($http, f_server + "/api/checkout", data)
      .success(function(data, status, headers, config) {
        var d = angular.fromJson(data);

          console.log("Purchase Success");



   <script id="purchase.html" type="text/ng-template">
    <ion-view title="Purchase" ng-controller="PurchaseCtrl">
      <ion-nav-bar class="bar-royal">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
      <ion-content overflow-scroll="true">
        <div style="height: 100%; width: 100%;">
          <iframe src="http://external.url/payment/start" style="width:100%; height: 100%;"></iframe>

Ok so i solved it by loading the url of the iframe after the scope has been set.
Still not sure why iframe s are loaded twice though…


<iframe ng-src="{{iframeUrl | trusted}}" style="width:100%; height: 100%;" iframe-onload="iframeLoadedCallBack()"></iframe>

.controller("FastPurchaseCtrl", function($rootScope, $scope, $state, $http, $ionicNavBarDelegate, $q, restaurant, $cordovaStatusbar, $ionicLoading){
    template: '<i class=""></i>Loading...'
  $scope.iframeUrl = '';
    $scope.iframeUrl = 'http://url.url';
  $scope.iframeLoadedCallBack = function(){

.directive('iframeOnload', [function(){
  return {
    scope: {
        callBack: '&iframeOnload'
    link: function(scope, element, attrs){
        element.on('load', function(){
            return scope.callBack();

.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);

var app = angular.module('myapp', ['ionic', 'ngCordova', 'ngSanitize'])