Angular $ scope函数在ng-repeat之外不起作用

Question

I have a <table> element, at which I declared a controller (only one in the app at the moment). I also have a ng-repeat on <tr> in the <tbody> element, which is working just fine, creating multiple table rows as intended. In the controller i have some api calls which are called for single table rows and which work just fine, and a function called from one of the <th> 's in <thead> , which I can't get to work. I know it's a scope thing, but I just can't grasp what I'm doing wrong.

To sum it up:

simplified html fragment:

<table ng-controller='myController'>
    <thead>
         <tr>
             <th>Username</th>
             <th><button ng-click='doStuff()'>Do stuff</button></th>
         </tr>
    </thead>
    <tbody>
         <tr ng-repeat='user in users'>
             <td>{{user.name}}</td>
             <td><button ng-click='delete(user)'>Delete</button>
         </tr>
    </tbody>
</table>

simplified js fragment:

app.controller('myController', ['$scope', '$http', users, function($scope, $http, users) {
    //api call to get users, working fine
    users.getAll().success(function(data) {
        $scope.users = data;
    });

    //api call to delete users, also working fine
    $scope.delete = function(user) {
        users.delete(user).success(function() {});
    };

    //can't get this to fire
    $scope.doStuff = function() {
        alert('I do stuff');
    };
}]);

Any insight would be helpful, thanks in advance!

EDIT

I assume the issue is comming from one of the modules, so I copied the whole thing into a plnkr . Sorry for the styling, removed it for more code simplicity.

EDIT 2

After studying the plnkr I came to see that it was an unclosed <div> element in the <thead> . Ouch. Thanks for the replies, and please excuse my carelessness.

EDIT 3

An even more carefull study revealed, that the problem has in fact been also lying in poorly designed jasmine unit tests.

Answer 1

It appears to be firing. I've had to simulate the asynchronous loading of users , but that shouldn't make a difference. Can you add a snippet to demonstrate the issue?

  angular.module('app', []).controller('myController', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { //api call to get users, working fine $timeout(function() { $scope.users = [{ name: 'A' }, { name: 'B' }]; }, 1000); //api call to delete users, also working fine $scope.delete = function(user) { console.log('delete', user); }; $scope.doStuff = function() { console.log('I do stuff'); }; } ]); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <div ng-app="app"> <table ng-controller='myController'> <thead> <tr> <th>Username</th> <th> <button ng-click='doStuff()'>Do stuff</button> </th> </tr> </thead> <tbody> <tr ng-repeat='user in users'> <td>{{user.name}}</td> <td> <button ng-click='delete(user)'>Delete</button> </tr> </tbody> </table> </div>