Angular ng-click not working in div

Question

Ok, I've been stuck here for a while, and I'm sure it's something relatively dumb

http://plnkr.co/edit/YcBnbE5VCU5rizkDWreS?p=preview

<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

    <script >
        function myCtrl($scope,  $window) {
            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1"},
              { Id: 2, Name: "Course 2"}
              ];
            $scope.OpenCourse = function(courseId) {
                $window.alert("Called " + courseId);
            }
        }
    </script>
</head>
<body ng-controller="myCtrl">
    <div>  
        <div ng-repeat="course in vm.Courses" ng-click="vm.OpenCourse(course.Id)">
            <div>
                <div>
                    <label>{{course.Name}}</label>
                </div>
            </div>
        </div>
    </div>
</body>

Why isn't ng-click firing here? It seems that this question is asked a lot, but none of the answers seem to help. It also looks like moving the div out of the repeat makes it work, but again, I'm not sure why.

Thanks

score 21 · Accepted Answer · answered Dec 16 '14 at 19:06

21

Remove vm.

Result:

<div ng-repeat="course in vm.Courses" ng-click="OpenCourse(course.Id)">

Why?, because everything you set to $scope becomes available on the partial, then you just have to call it.

answered Dec 16 '14 at 19:06

Felipe Pereira

11,410
4
41
45

score 8 · Answer 2 · answered Dec 16 '14 at 19:23

8

The lack of "vm" in front of OpenCourse(course.Id) was actually a typo on my part when creating the plunker. I've marked an answer as correct, since it did cause the plunker to work, but my problem wasn't this. It turned out that I had a class assigned to outer div that was changing the z-index, putting that div "behind" the others, and not allowing the click to propagate.

answered Dec 16 '14 at 19:23

Carlos Rodriguez

2,190
2
18
29

I had a similar problem where the button was inside a and ng-click was not firing. I had to restructure the layout to take the button outside and it started working then. Thanks for your reply. – Neo Mar 27 '15 at 03:55
1

Please uncheck the other answer if it does not actually answer you question. – idmean Jun 12 '15 at 19:51
6

It did answer the question. The problem was that my question didn't properly express my problem – Carlos Rodriguez Jun 12 '15 at 19:52
1

I had a similar issue and changing the z-index sorted it. Thanks! – jste89 Nov 20 '15 at 14:15

score 2 · Answer 3 · answered Jun 02 '15 at 13:37

2

If you use <label> you might experience weird behaviour when clicking on it. Try changing it to something else if possible and re-test your code.

answered Jun 02 '15 at 13:37

lokers

2,106
2
18
19

score 0 · Answer 4 · answered Dec 16 '14 at 19:06

0

Change it to :

ng-click="OpenCourse(course.Id)"

Working plunker

answered Dec 16 '14 at 19:06

ltalhouarne

4,586
2
22
31

Angular ng-click not working in div

4 Answers4

Linked