javascript - Why my ng-click not working -

i not sure why ng-click not picking function. tried assigning 'next' function scope variable , still didn't work.

here html (exluding 'app' bit in element)

<div ng-controller="carouselctrl">     <div>         <img src="" class="carousel-arrow" ng-click="next();">         <h1>{{index}}</h1>     </div> </div> 

here javascript

var app = angular.module('app', []);  app.controller('carouselctrl', ['$scope', function($scope) {      var carousel = {};      carousel.data = ['slide 1', 'slide 2', 'slide 3', 'slide 4', 'slide 5']     carousel.index = 0;      carousel.next = function() {          if (carousel.index >= carousel.data.length) {             carousel.index = 0;          } else {             carousel.index++         }     }          $scope.index = carousel.data[carousel.index];         $scope.next = function(){         carousel.next();         console.log('clicked');     } }]); 

$scope.next = carousel.next(); 

change to

$scope.next = carousel.next; 

by doing $scope.next = carousel.next(); scope next no longer function value returned carousel.next() function. have assign function definition above.

update

$scope.next = function(){         carousel.next();         $scope.index = carousel.data[carousel.index];         console.log('clicked'); }