AngularJS http post and redirect to payment gateway

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.formData = {
    redirectUrl: 'https://payment-gateway-url',
    redirectMethod: 'POST',
    redirectData: {
      id: 1,
      para1: 'para1'
    }
  };

  $scope.transaction = function() {
    $scope.$broadcast('gateway.redirect');
  };
});

app.directive('autoSubmitForm', ['$interpolate', function($interpolate) {
  return {
    replace: true,
    scope: {
      formData: '='
    },
    template: '',
    link: function($scope, element, $attrs) {
      $scope.$on($attrs['event'], function(event, data) {
        var form = $interpolate('<form action="{{formData.redirectUrl}}" method="{{formData.redirectMethod}}"><div><input name="id" type="text" type="hidden" value="{{formData.redirectData.id}}"/></div></form>')($scope);
        console.log(form);
        jQuery(form).appendTo('body').submit();
      })
    }
  }
}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
    document.write('<base href="' + document.location + '" />');
  </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="transaction()">Transaction</button>
    <div auto-submit-form="" event="gateway.redirect" form-data="formData"></div>
  </body>

</html>

/* Put your css in here */