AngularJS directive jQuery submit event handler only fires once

Question

I am trying to make a wrapper directive for a Wordpress plugin called gravity forms. The directive loads the forms HTML and injects into DOM but for some reason the submit handler is only getting called once.

Here is the directive code:

app.directive( 'gravityForm', ['api', function ( api ) {

        function gravityFormLink( scope, element ) {
            scope.$watch( 'formId', function ( formId ) {
                if ( formId ) {
                    var promise = api.query( 'get_gform_html', {formId: formId} );
                    promise.then( promiseSuccess );
                }

            } );


            function promiseSuccess( response ) {
                var gFormWrapperHTMLStr = '<div>' + response.data.data + '</div>';
                var gFormWrapper = angular.element( gFormWrapperHTMLStr );

                //Remove scripts injected by gravitry forms
                gFormWrapper.find( 'script' ).remove();

                element.html( gFormWrapper );

                element.on( 'submit', 'form', function ( e ) {
                    e.preventDefault();
                    // Only fires once
                    alert( 0 );

                } );



            }
        }

        return {
            scope: {formId: '@'},
            template: "<ajax-spinner></ajax-spinner>",
            link: gravityFormLink
        };
    }] );

Answer 1

There was code in the submit buttons onclick handler that was disabling the submition

app.directive( 'gravityForm', ['api', function ( api ) {

    function gravityFormLink( scope, element ) {
        scope.$watch( 'formId', function ( formId ) {
            if ( formId ) {
                var promise = api.query( 'get_gform_html', {formId: formId} );
                promise.then( promiseSuccess );
            }

        } );


        function promiseSuccess( response ) {
            var gFormWrapperHTMLStr = '<div>' + response.data.data + '</div>';
            var gFormWrapper = angular.element( gFormWrapperHTMLStr );

            //Remove scripts injected by gravitry forms
            gFormWrapper.find( 'script' ).remove();

            //*** Removing gform's submit handler
            gFormWrapper.find( ':submit' ).removeAttr( 'onclick' );

            element.html( gFormWrapper );

            element.on( 'submit', 'form', function ( e ) {
                e.preventDefault();
                // Only fires once
                alert( 0 );

            } );



        }
    }

    return {
        scope: {formId: '@'},
        template: "<ajax-spinner></ajax-spinner>",
        link: gravityFormLink
    };
}] );