Angular Form not submitting on first click - angularjs

Question

I have built a small angular App into my website whereby a user enters a searchterm into an input field and then values are returned via an Angular service. When I attempt to submit a value however, the form does not submit and will only submit on the 2nd attempt. I cannot figure out why this is happening.
Here is my code:
<div ng-app="clubFilter" class="col-lg-12">
<div class="col-lg-3">
</div>
<div class="col-lg-9" ng-controller="clubController">
<form ng-submit="filterClubs()">
<input type="text" name="location" ng-model="searchTerm" placeholder="Search..." />
<input type="submit" name="submit" value="Submit" />
</form>
<ul class="leisure-centres">
<li ng-repeat="club in clubs">
<div class="centre">
<a class="link" ng-href="{club.link}">More info</a>
<div class="image" ng-show="club.image > 0">
<img src="{{image}}" alt="{{club.title}}" />
</div>
<div class="details">
<div class="title">
<h3>{{club.title}}<span ng-show="club.distance > 0"> - {{club.distance}} miles away</span></h3>
</div>
<div class="address">
{{club.building}},
{{club.street}},
{{club.city}},
{{club.county}},
{{club.postcode}}
</div>
<div class="tel">
<strong>Tel: </strong>
</div>
<div class="email">
<strong>Email: </strong>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
var JSONItems = <?php echo $this->JSONItems; ?>;
var searchTerm = "<?php echo $this->searchTerm; ?>";
And here is my angular controller
angular.module('clubFilter.controllers', []).
controller('clubController', function($scope, $http, googleMapService) {
$scope.keyWord = "SEARCH";
$scope.clubsJSON = JSONItems;
if(searchTerm == "") {
$scope.clubs = $scope.clubsJSON;
} else {
$scope.searchTerm = searchTerm;
googleMapService.setLatLng($scope.searchTerm, $scope.clubsJSON).then(function(sortedArray) {
$scope.$apply(function() {
$scope.clubs = sortedArray;
});
}, function(err) {
alert("no");
});
}
$scope.filterClubs = function() {
googleMapService.setLatLng($scope.searchTerm, $scope.clubsJSON).then(function(sortedArray) {
$scope.clubs = sortedArray;
}, function(err) {
alert("no");
});
}
});
As far as I am aware I have everything defined as it should be?
Thanks

Answer 1

Try this one;
<div class="col-lg-9" ng-controller="clubController as club">
<form ng-submit="club.filterClubs()">
<input type="text" name="location" ng-model="club.searchTerm" placeholder="Search..." />
<input type="submit" name="submit" value="Submit" />
</form>
And in your controller;
this.filterClubs = function() {
googleMapService.setLatLng(this.searchTerm, $scope.clubsJSON).then(function(sortedArray) {
$scope.clubs = sortedArray;
}, function(err) {
alert("no");
});
}