Anirban Anirban - 1 month ago 6
AngularJS Question

Not able to call function on ng-click

I have the following div in which I have several list item.

<div id="wrapper" ng-controller="MyController" class="my-controller">
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-pills nav-stacked" id="menu">
<li class = "active">
<a href="#legislate" ng-click="getLegislators()" ><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
</li>


Then I have the getLegislator() function defined as below:-

var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination']);
myApp.controller('MyController', function ($scope, $http) {
$http({
method: 'GET',
url: 'getData.php',
params: {value: 'legislator'}
}).then(function (response) {
legislators = response.data.results;
});
$scope.getLegislator=function(){
$scope.users = []
$scope.house = []
$scope.senate = []


Which does other tasks too. The thing is that when I click on the list item the function call does not happen. I am pretty new to this, dont know what I am doing wrong. My objective is to run the function when the list item is clicked.

Answer

Your function name inside 'ng-click' is 'getLegislators()'. But in the controller you are written '$scope.getLegislator'. Remove 's' added at the end in the template ng-click function

Comments