Naguib Ihab Naguib Ihab - 11 days ago 6
AngularJS Question

ngClick is not working on a div element

I've been stuck at this for a while, this is my generated html:

<div style="margin: 0 5px; border: 2px solid #FFFFFF; height:24px;">
<div id="activity-bar" class="padding0 margin0 ng-isolate-scope" style="width: 100%; background: rgb(179, 179, 179); position: relative; overflow: visible; height: 20px;" ng-style="thisStyle" display-sections="student.history_list" height="20" loading="loading" type="2" user-id="student.fic_student_id">
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-29464 task-background-3 ng-scope" style="left:0%; width:10%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="PrimaryGames: Free Games and Videos
primarygames.com (click on the bar to view)
start time: 09:40am"></div>
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-54094 task-background-4 ng-scope" style="left:10%; width:10%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="writing0.sumdog.com
writing0.sumdog.com (click on the bar to view)
start time: 09:45am"></div>
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-54094 task-background-4 ng-scope" style="left:20%; width:10.01%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="writing0.sumdog.com
writing0.sumdog.com (click on the bar to view)
start time: 09:50am"></div>
<!-- Some more divs -->
</div>
</div>


The tooltips are working but the ng-clicks are not, am i missing something?

Answer

In angular, recommended way is to call function

<div ng-click="consoleinfo('working')" 

In Controller:

$scope.consoleinfo = function(message){
console.log(message);
}

DEMO