Angular Form submit button only fires on second click

Question

I'm building a small webpage that does some queries to an API. The query happens when the submit button is hit, if all entered data is valid. However at some point when I was adjusting the form from a set of separate elements (textbox, selectbox, button), I started having to hit "Search" once, and then hit it again for the function to fire.

What is going on/how do I fix this?

HTML:

<div id="search" class="centerWrapper">
    <div id="searchArea" class="searchArea">
        <input type="text" class="inputBox" name="charName" ng-model="charName" placeholder="Character Name"></input>
        <select class="selectBox" ng-model="selectedRealm" name="selectedRealm" ng-options="realm.name for realm in realmList">
            <option value="" class="realmPlaceholder" disabled selected>Select Realm Name</option>
        </select>
        <button type="button" ng-click="buttonpress(charName, selectedRealm)" class="searchButton">Search</button>
    </div>
</div>

Controller code:

$scope.buttonpress = function(charName, realmName){
    if(typeof charName === "undefined" || charName.includes("world") || typeof realmName === "undefined"){
        alert("Please enter a valid Character Name and Realm.")
    } else {
        var request = {name: charName, realm: realmName};
        $http.post('/buttonpress', request)
        .then(function(response) {
            alert(response.data);
        });
    }
}

CSS:

input.searchButton {
    text-align: center;
    width: 79%;
    background-color: #128880;
    color:#ACC8C9;
    border: none;
    margin-top: 5px;
    height: 22%;
}

input.searchButton:hover {
    background-color: rgb(1, 92, 196)
}

input.searchButton:active {
    background-color: #134b58;
    box-shadow: 0 5px rgb(102, 102, 102);
    transform: translateY(4px);
}

NOTE: I've noticed this is also only upon starting the page and refreshing.

Answer 1

Whoops. This is why it's a bad idea to code until 4:30AM. Some stupid mistakes are going to happen:

$scope.buttonpress = function() {
    $scope.buttonpress = function(){
        if(typeof $scope.charName === "undefined" || $scope.charName.includes(";") || typeof $scope.selectedRealm === "undefined"){
            alert("Please enter a valid Character Name and Realm.")
        } else {
            var request = {name: $scope.charName, realm: $scope.selectedRealm};
            $http.post('/buttonpress', request)
            .then(function(response) {
                // alert(response.data);
                debugger;
                $scope.showBoard = true;
            });
        }
    }
};

Answer to the mystery: somehow I put buttonPress inside another buttonPress.. whoops.