AngularJs function with Modal button type Issue

Question

I am attempting to trigger a search function on a button but have a modal popover so I can use angular to format the JSON. The modal functionality works, but to trigger my function I need to have the button type="submit" to trigger the ng-submit. However, when I change the button type, this pulls the JSON but blocks the modal. Is there another way I can trigger the submit? Any suggestions on how to structure this better? Or if there are dependencies I might need? Thank you

JS Code:-

app.controller('homeCtrl', function($rootScope, $stateParams, $http) {
    $rootScope.home;
    $rootScope.displayCity = false;
    $stateParams.city_id;

    $rootScope.searchCity = function() {
        $rootScope.displayCity = true;
        let query = $('#query').val();

        $http({
            method: 'GET',
            url: 'apiUrl',
            headers: {
                'user-key': $rootScope.key,
            },
            params: {
                'q': query
            }
        }).then(function(response) {
            console.log(response.data);
            $rootScope.displayCity = true;
            $("#myModal").show()


        }).catch(function(response) {
            console.log("something went wrong");
        });

    };
});

HTML Code:-

<div class="container">
    <div class="row">
        <div class="vh-100 col-12 d-flex flex-column justify-content-center">

            <form class="mt-4" ng-submit="searchCity()">
                <div class="form-group d-flex">
                    <input id="query" type="text" placeholder="Search For Your City" class="form-control" />
                    <!-- Button trigger modal -->
                    <button type="submit" class="searchbtn btn-danger" data-toggle="modal" data-target="#myModal">
                        Go
                    </button>

                    <!-- Modal -->
                    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Select Your City</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
            </form>
        </div>
    </div>
</div>

Answer 1

This looks like an issue between jQuery and Angular not being in sync. My recommendation is not to try and mix the two libraries. Their approaches differ, and they lead to strange things like this throughout the lifecycle of an app. AngularJS does use a subset of jQuery, more of which you can read about here.

My recommendation is to look at implementing UI-Bootstrap's modal. I did a quick sanity check with their demo, and changing the button to a submit type does not alter the modal functionality.

Here's a trimmed down version of their provided demo for a basic modal, with a single controller: https://plnkr.co/edit/bJUyfHNlQ2KA380SoaMu

If you don't want to go the suggested route, another option that might work (I have not validated this theory) would be using ng-click instead:

<button type="button" ng-click="searchCity()"
        class="searchbtn btn-danger"
        data-toggle="modal"
        data-target="#myModal">

From what you have posted, I do not see any reasons not to take this approach, other than the above mentioned, but that said, do this having reviewed the answers to this question: differences between ng-submit and ng-click before doing so.