I'm using the fabulous UI Bootstrap for Angular but am having difficulty getting an onclick event raised.

Here is the code:

<ul class="dropdown-menu" role="menu">
    <li><a><img src='/Content/Images/dept_cargo.png'/> CARGO</a></li>
    <li><a><img src='/Content/Images/dept_mercial.png'/> COMMJ</a></li>
    <li><a><img src='/Content/Images/dept_executive.png'/> EXECJ</a></li>
    <li><a><img src='/Content/Images/dept_travel.png'/> TVL</a></li>
</ul>
{{ currentDepartment }}

I've tried every bination: putting the ng-click="behaviour()" variously inside the li, the a and the img, but nothing seems to work.

What am I doing wrong?

(ideally I'd just like to change the value of a scope variable but I'm thinking calling a behaviour to do the work is better practice)

This question is not the same as suggested above. The other question is to do with scope, whereas I would be happy just to be able to execute an alert(); from one of my li's.

I'm using the fabulous UI Bootstrap for Angular but am having difficulty getting an onclick event raised.

Here is the code:

<ul class="dropdown-menu" role="menu">
    <li><a><img src='/Content/Images/dept_cargo.png'/> CARGO</a></li>
    <li><a><img src='/Content/Images/dept_mercial.png'/> COMMJ</a></li>
    <li><a><img src='/Content/Images/dept_executive.png'/> EXECJ</a></li>
    <li><a><img src='/Content/Images/dept_travel.png'/> TVL</a></li>
</ul>
{{ currentDepartment }}

I've tried every bination: putting the ng-click="behaviour()" variously inside the li, the a and the img, but nothing seems to work.

What am I doing wrong?

(ideally I'd just like to change the value of a scope variable but I'm thinking calling a behaviour to do the work is better practice)

This question is not the same as suggested above. The other question is to do with scope, whereas I would be happy just to be able to execute an alert(); from one of my li's.

• javascript
• angularjs

• 5 Hi! Can you share a jsfiddle? Thanks – GianArb Commented Apr 15, 2015 at 14:44
• <a href="/something"> not work? – YOU Commented Apr 15, 2015 at 14:47
• Please show an example of something that you've tried and the code for behaviour(). It's impossible to say what you're doing wrong without seeing what you're doing. – JJJ Commented Apr 15, 2015 at 14:47
• possible duplicate of AngularJS ng-click not working in <li> tag – jlewkovich Commented Apr 15, 2015 at 14:48
• 1 You need to show a simple example that duplicates the issue, or all we can do is guess at what is wrong. – forgivenson Commented Apr 15, 2015 at 15:03

3 Answers 3

You must have an issue in the js code where you set up the controller but if you set it up right, your html should look like this:

<ul class="dropdown-menu" role="menu">
    <li ng-click="behaviour()"><a><img src='/Content/Images/dept_cargo.png'/> CARGO</a>
    </li>
    <li ng-click="behaviour()"><a><img src='/Content/Images/dept_mercial.png'/> COMMJ</a>
    </li>
    <li ng-click="behaviour()"><a><img src='/Content/Images/dept_executive.png'/> EXECJ</a>
    </li>
    <li ng-click="behaviour()"><a><img src='/Content/Images/dept_travel.png'/> TVL</a>
    </li>
</ul>

and in your js:

function myCtrl($scope) {
    $scope.behaviour = function () {
       alert('asd');
    };
}

and here is a working sample: http://jsfiddle/97u2jp6d/1/

<ul class="dropdown-menu" role="menu">
    <li><a ng-click="behaviour()"><img src='/Content/Images/dept_cargo.png'/> CARGO</a></li>

Make sure you have $scope.behaviour = function() {} defined inside of the controller for that code snippet.

You don't need more than this:

HTML

 <ul>
  <li ng-click="doSomething()">item 1</li>
  <li ng-click="doSomething()">item 2</li>
  <li ng-click="doSomething()">item 3</li>
  <li ng-click="doSomething()">item 4</li>
  <li ng-click="doSomething()">item 5</li>
</ul>

Controller

$scope.doSomething = function () {
console.log('doing something');
} 

http://plnkr.co/edit/52C2daC9jugCOOaNBDvP