angularjs form submit causing page reload and adding '?' to url

Question

I have the following form in my angular application

<div id="edit-customer-form">
    <form data-ng-submit="formCtrl.submit()">
        <label data-ng-click="formCtrl.out()">Name
            <input type="text" data-ng-model="formCtrl.customer.name"/>
        </label>
        <label>Consignee
            <input type="text" data-ng-model="formCtrl.customer.consignee"/>
        </label>
        <label>Invoice To
            <input type="text" data-ng-model="formCtrl.customer.invoice_to"/>
        </label>
        <label>Notify Party
            <input type="text" data-ng-model="formCtrl.customer.notify_party"/>
        </label>
        <label>Point of Sale
            <input type="text" data-ng-model="formCtrl.customer.point_of_sale"/>
        </label>
        <label>Country
            <select data-ng-model="formCtrl.selectedCountry"
                    data-ng-options="country.Country.name for country in formCtrl.countries"></select>
        </label>
        <label>Port
            <select data-ng-model="formCtrl.customer.port_id"
                    data-ng-options="port.id as port.name for port in formCtrl.ports"></select>
        </label>

        <button type="submit">Save</button>
        <button type="button" data-ng-click="formCtrl.cancel()">Cancel</button>
    </form>
</div>

This element is the template for a directive editCustomerForm.

The directive is very long, so I won't post the whole thing here unless it's needed, but the function submit() is currently only producing a console log.

form.submit = function () {
    console.log('submitting');
};

When the form is submitted, the url website.com/#/customers becomes website.com/?#/customers. This causes a full page refresh.

After the ? is added to the url, everything work as expected, until a link clicked, which refreshes page again and resets the url.

I've worked with angular for a long time now, and I've never run into this behaviour. What's causing this?

Edit: Here's how my directive is declared.

.directive('editCustomerForm', [
            'customerService', 'countryService', 'portService', 'errorService',
            function (customerService, countryService, portService, errorService) {
                return {
                    restrict: 'E',
                    scope: {
                        pushTo: '&',
                        customer: '&'
                    },
                    templateUrl: '/partials/elements/customers/forms/edit.html',
                    controller: function ($scope) {
                        var form = this;
                        form.pushTo = $scope.pushTo;
                        form.countries = [];
                        form.ports = [];
                        form.selectedCountry = {};
                        form.selectedPort = {};

                        var clone = function (obj) {
                            return $.extend(true, {}, obj);
                        };

                        form.customer = clone($scope.customer());

                        ...

                        form.submit = function () {
                            console.log('submitting');
                            //customerService.edit(form.customer, successfulEdit(form.customer), handleError)
                        };

                        form.cancel = function () {
                            form.customer = {};
                            form.selectedCountry = {};
                            form.selectedPort = {};
                            form.pushTo().cancelEditCustomer();
                        };

                    },
                    controllerAs: 'formCtrl'
                };
            }]);

Update

So the issue seems to be here

<div id="edit-customer-modal" class="reveal-modal" data-reveal-modal="{{customers.modalOn ? 'show-modal' : 'hide-modal'}}" data-reveal>
    <edit-customer-form push-to="customers" customer="customers.getSelectedEditCustomer()"></edit-customer-form>
</div>

Where I'm using my form inside of a foundation 5 modal. I've made a directive reveal-modal for the modal.

This is the modal directive code

app.directive('revealModal', function () {
    return function (scope, elem, attrs) {
        scope.$watch(function(){return attrs.revealModal}, function (val) {
            if (val === 'show-modal') {
                elem.foundation('reveal', 'open');
            } else {
                elem.foundation('reveal', 'close');
            }
        });
    }
});

When the form isn't inside this block, it executes correctly.

I'd like to be able to use my forms inside modals, so any suggestions would be appreciated.

My modal directive is also in a different module than my form directive, if that makes any difference.