ng-click not executing controller function

Question

I have a very simple function in one of my angular controllers

$scope.search = function () {
    alert("Search");  
};

and from my view I have

<button type="button" data-ng-click="search()"><i class="fa fa-search"></i></button>

The function is never executed when the button is clicked, but the rest of the code in my controller is executed as expected. Is there any reason why the ng-click directive will not fire my function?

I have similar controllers all working as expected.

Update

The button is within a bootstrap 3 modal, when the button is moved out of the modal, the click event works. Any reason for this happening?

Update

The button is within scope of the controller, here is my controller and view for clarity

(function () {
var module = angular.module("crest");

var brokerGridController = function ($scope, readEndpoint, readBroker) {
    $scope.endpoint = "";
    $scope.isBusy = false;
    $scope.havebroker = false;
    $scope.brokers = [];
    $scope.searchCriteria = "";
    $scope.exception = "";

    var setEndpoint = function (response) {
        $scope.endpoint = response.Endpoint;
    };

    readEndpoint.read("BusinessLogicAPI").then(setEndpoint);

    var onSuccess = function (response) {
        if (response.Message.MessageType == 1) {
            onError();
        }

        $scope.havebrokers = response.brokers.length > 0;

        angular.copy(response.brokers, $scope.brokers);
        angular.copy(response.Message.body, $scope.exception);
    };

    var onError = function () {
        $("#errorMessageModal").modal("show");
    };

    $scope.search = function () {
        alert("Search");
    };
};

module.controller("brokerGridController", ["$scope", "readEndpoint", "readBroker", brokerGridController]);
}());

and the view

<div data-ng-controller="brokerGridController">
<div>
    <div class="col-md-4">
        <div class="contacts">
            <div class="form-group multiple-form-group input-group">
                <div id="searchBrokerDropdown" class="input-group-btn input-group-select">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="concept">Broker Name</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Broker Name</a></li>
                    </ul>
                    <input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="phone">
                </div>
                <input type="text" name="contacts['value'][]" class="form-control" data-ng-model="searchPhrase">
                <span class="input-group-btn searchButton">
                    <button type="button" class="btn btn-success btn-add" data-ng-click="$parent.search()"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </div>
    </div>
</div>

<div>
    <div class="col-md-12">
        @Html.Partial("_Loading", new LoadingViewModel() { DisplayText = "Loading brokers..." })
        <div data-ng-show="!isBusy && !haveBrokers">
            <h3>No brokers found.</h3>
        </div>
        <div class="panel" data-ng-show="!isBusy && haveBrokers">
            <div class="panel-heading">
                <h4 class="panel-title">Brokers</h4>
                <div class="pull-right">
                    <span class="clickable filter" data-toggle="tooltip" title="Filter Brokers" data-container="body">
                        <i class="fa fa-filter"></i>
                    </span>
                </div>
            </div>
            <div class="panel-body">
                <input type="text" class="form-control" id="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="Filter Tasks" />
            </div>
            <table class="table table-hover" id="task-table">
                <thead>
                    <tr>
                        <th>Broker Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="broker in brokers">
                        <td>{{ broker.Name }}</td>
                        <td data-ng-show="searchCriteria != 'PolicyNumberLike'"><a href="#"><i class="fa fa-search"></i> View Policies</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

You have to check 2 things in that situation:

1. Check if your button is in the front (rise his z-index or check is :hover is working), maybe it is not on top so it can't be clickable.

2. Check if that buttont dont have own $scope (it is crated in subdirective, or in ng-repeat for example), in taht situation check:

   <button type="button" data-ng-click="$parent.search()"><i class="fa fa-search"></i></button>

If that 2 things dosen't work check if any command ex. console.log('test_mode') will fire after click.

Answer 2

It's most likely that the button is outside of controller scope, if you provide model with a specific controller you should put search function inside said controller, if you want to keep it in parent controller specify it like this:

$scope.modalFunctions = {
  search: function () {
    //do something
  }
}

then use ng-click="modalFunctions.search"

Answer 3

Ok, I finally found the problem. My angular view is within a bootstrap wizard component (within a bootstrap modal) that I copied from Bootsnipp. The problem was with the javascript that was supplied,

wizardContent.html(currStep.html());

this piece of code replaced the wizard content with the HTML of the correct step. I modified the javascript to hide and show the correct steps instead of copying the HTML of the correct step to the div displayed to the user, which resolved the issue.