ng-click or ng-submit is not invoking controller method

Question

I have just started learning Angular JS and downloaded Dan Wahlin's Customer Manager App for my hands on. I have tried so far to call my Web API to return all records and bind with View which worked well. Now I am trying to add a textbox with submit button to search for the entered text, which seems very basic functionality of angular app, but failing to invoke controller method by clicking the submit button:

    <form ng-submit="getSearchResuls(id)">
        <input type="text" data-ng-model="id" class=" novalidate form-control" />
        <input type="submit" value="Search"  />
    </form>

I have also tried:

        <form >
        <input type="text" data-ng-model="id" class=" novalidate form-control" />
        <input type="submit" value="Search" onclick="getSearchResuls(id)" />
    </form>

Both are not working with my following controller definition (function () {

var injectParams = ['$location', '$filter', '$window',
                    '$timeout', 'authService', 'dataService', 'modalService'];

 var CustomersController = function ($location, $filter, $window,
    $timeout, authService, dataService, modalService) {

function getSearchResuls(id) {
        dataService.getSearchResults(id, vm.currentPage - 1, vm.pageSize)
            .then(function (data) {
                vm.totalRecords = data.totalRecords;
                vm.customers = data.results;
                filterCustomers(''); //Trigger initial filter

                $timeout(function () {
                    vm.cardAnimationClass = ''; //Turn off animation since it won't keep up with filtering
                }, 1000);

            }, function (error) {
                $window.alert('Sorry, an error occurred: ' + error.data.message);
            });
    }
};

CustomersController.$inject = injectParams;

angular.module('customersApp').controller('CustomersController', CustomersController);

}());

I have also tried to add ng-controller in form tag but still with no luck. Can I have your valuable remarks to solve this issue please?

Answer 1

The function getSearchResuls needs to be added to your scope. So, first off, make sure that '$scope' is listed as an injectParams, and then include $scope as an argument for your CustomersController. Then do something like this:

$scope.getSearchResuls = function (id) {
   //the rest of your code here
}