Function in AngularJS controller not being called

Question

I am trying to call a function from my AngularJS controller with the following code:

Controller Code

(function () {

    var hello = angular.module("helloApp", []);

    hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) {
        console.log("in controller");
        $scope.test = function() {
            console.log("in test function");
            $http.get("/test").success(function(data) {
                console.log("success");
            })
            .error(function(data) {
                console.log("error");
            });
        };
    } ]);

})();

HTML

<!DOCTYPE html>
<html ng-app="helloApp">
  <head>
    ...
  </head>
  <body ng-controller="HelloCtrl">
  <div class="container">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default" ng-click="test()">Search</button>
        </div>
      </div>
    </form>
  </div>
  ...
</body>

When I launch the application, I see the message "in controller", as I would expect. However, if I click on the submit button then I do not see any of the other three console messages.

What am I missing?

Reactgular · Accepted Answer · 2015-03-03 01:39:06Z

5

Your order of dependency injection is wrong.

hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) {

Should be

 hello.controller("HelloCtrl", ["$http", "$scope", function($http, $scope) {

The order of parameters must be the same order as the array of names.

answered Mar 3, 2015 at 1:39

Reactgular

55.1k24 gold badges174 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function in AngularJS controller not being called

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related