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?

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?

• javascript
• angularjs

• 2 Do you have the prevImage() defined? Are you clicking the prevImage() button? – chubbsondubs Commented Oct 11, 2013 at 16:30
• Did you ever find an answer for this? I have the case with the same output but only after the first click, which works fine. – Rob Shepherd Commented Apr 3, 2014 at 16:49
• I used a function which is reserved.. $scope.register = fun... won't work. – Matej Commented Apr 4, 2014 at 22:30

5 Answers 5

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.

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.

When creating a new module you need to specify a second parameter (its dependencies). If you have none, simply pass an empty array.

angular.module('AppliedSiteApp', [])...

Your example could access an existing module (that's when you don't specify the second argument), but then there's probably some code missing to spot the error (or I'm just blind).

try the following definition of controller

var AppliedSiteApp = angular.module('AppliedSiteApp', []);

function CarouselCtrl($scope) {

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

I agree with the other responses that it's an issue with your wiring. Try this fiddle as an example: http://jsfiddle.net/reblace/7fVQR/

Declare your outer div like this:

<div ng-app="app" ng-controller="MainController">

And then your controller like this:

var app = angular.module('app', []);
function MainController($scope) { ... }