Angular ng-click not working in div

angularjs angularjs-ng-click
Carlos Rodriguez picture Carlos Rodriguez · Dec 16, 2014 · Viewed 63.3k times · Source

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

Answer

Felipe Pereira picture Felipe Pereira · Dec 16, 2014

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.

Related questions

Adding parameter to ng-click function inside ng-repeat doesn't seem to work

I have a simple loop with ng-repeat like this: <li ng-repeat='task in tasks'> <p> {{task.name}} <button ng-click="removeTask({{task.id}})">remove</button> </li> There is a function in …

Read More
How/when to use ng-click to call a route?

Suppose you are using routes: // bootstrap myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider.when('/home', { templateUrl: 'partials/home.html', controller: 'HomeCtrl' }); $routeProvider.when('/about', { templateUrl: 'partials/about.html', controller: 'AboutCtrl' }); ... And in your html, you …

Read More
adding and removing classes in angularJs using ng-click

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is …

Read More