javascript - Angularjs - repeat and click

Question

I try to make an angularjs project. I have the following code:

HTML:

<ul>
    <li ng-repeat="answer in question.answers">
        <button type="button" ng-click="answer($index)">{{answer}} ({{$index}})</button>
    </li>
</ul>

Controller:

.controller('QuestionCtrl', ['$scope', 'Questions', function($scope, Questions) {
    $scope.question = Questions.query();

    $scope.answer = function(ans) {
        console.log('clicked' + ans);
    }
}]);

The list is generated as expected, but when I click on on of the elements, I get this error message:

Error: fnPtr is not a function Parser.prototype.functionCall/<@http://localhost:8000/app2/lib/angular/angular.js:10169 ngEventDirectives[directiveName]</<.compile/</</<@http://localhost:8000/app2/lib/angular/angular.js:17823 Scope.prototype.$eval@http://localhost:8000/app2/lib/angular/angular.js:11906 Scope.prototype.$apply@http://localhost:8000/app2/lib/angular/angular.js:12006 ngEventDirectives[directiveName]</<.compile/</<@http://localhost:8000/app2/lib/angular/angular.js:17822 createEventHandler/eventHandler/<@http://localhost:8000/app2/lib/angular/angular.js:2610 forEach@http://localhost:8000/app2/lib/angular/angular.js:309 createEventHandler/eventHandler@http://localhost:8000/app2/lib/angular/angular.js:2609

Answer 1

You should use some other name for function $scope.answer

    $scope.answer1 = function(ans) {
        console.log('clicked' + ans);
    }

HTML:

<ul>
    <li ng-repeat="answer in question.answers">
        <button type="button" ng-click="answer1($index)">{{answer}} ({{$index}})</button>
    </li>
</ul>