Object not a function in AngularJS

Question

I have a controller that seems to be misbehaving. I have removed all the other code that works to make this short:

Controller:

'use strict';

angular.module('AppliedSiteApp').controller('CarouselCtrl', function ($scope) {

    $scope.nextImage = function() {
        console.log('hi');
    }

});

View:

<div class="carousel" ng-controller="CarouselCtrl">

    <ul class="nav">
        <li ng-click="prevImage()">&lt;</li>
        <li ng-click="nextImage()">&gt;</li>
    </ul>

</div>

Every time I click the button in the browser it says: 'TypeError: object is not a function' or 'no method replace'. What am I doing wrong?

Answer 1

Are you still having a problem with this?

I ran into the same issue. The problem for me was that the function name in the controller and view was the same name as a form I was using in the same view.

Changing either the form name or the function name fixed the error for me.

Answer 2

Something is wrong with the way you are wiring things I believe. I usually use this scaffold:

angular.module('AppliedSiteApp.controllers', []).
  controller('CarouselCtrl', ['$scope', function($scope) {
    $scope.nextImage = function() {
        console.log('hi');
    }
  }]);

The first argument to controller is the name, and the second is an array. In the array, you define what services you are injecting into your controller, then you define the callback function with the injected services as parameters.