AngularJs $scope undefined when controllers are inside a module

Solution 1:

You cannot mix things like that. You need to decide on one of the two possibilities:

app = angular.module('test', []);

// possibility 1 - this is not safe for minification because changing the name
// of $scope will break Angular's dependency injection
app.controller('MyController1', function($scope) {
    // ...
});

// possibility 2 - safe for minification, uses 'sc' as an alias for $scope
app.controller('MyController1', ['$scope', function(sc) {
    // ...
}]);

I would not advise using the other syntax which declares Controller directly. Sooner or later with the growth of you app it will become hard to maintain and keep track. But if you must, there are 3 possibilities:

function myController1 = function($scope) {
    // not safe for minification
}

function myController2 = ['$scope', function(sc) {
    // safe for minification, you could even rename scope
}]

var myController3 = function(sc) {
    // safe for minification, but might be hard
    // to read if controller code gets longer
}
myController3.$inject = ['$scope'];

Solution 2:

This is the proper way:

angular.module('myApp.controllers', []);

angular.module('myApp.controllers').controller('MyCtrl1', ['$scope', function($scope) {

}]);

Solution 3:

I was also searching for that one, it seems that you need to type '$scope' before the function, as below:

    angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope', function($scope) {
      $scope.test = 'scope found!';
  }])
  .controller('MyCtrl2', ['$scope',function() {

  }]);

It kinda makes sense, I think it should be more clear though..