Angular injects module causing bind fails

Question

I have recently started a new project on angularJS.

I have an index.html which basically render all the script files when started. There is a ng-view inside, the home.html will be loaded by ngRoute and is binded to a controller called HomeCtrl.

When I inject $resource to my HomeCtrl, the ng-bind on my html becomes not working, while removing the $resource it will work.

app.controller('HomeCtrl', ['$resource', function ($scope, $resource) {
     $scope.testText = 'testabc';
}])

I have tried inject something else, the behavior is also the same, the ng-bind will not work. There is no error shown in the browser console. May I know how can I trace what is actually happening?

Files as below:

https://plnkr.co/edit/P92PLlrWoqINpfeju5X1?p=preview

Answer 1

You forgot to add '$scope', angular tries to inject the objects in the order they are set.

Change

 app.controller('HomeCtrl', ['$resource', function ($scope, $resource) {
     $scope.testText = 'testabc';
 }])

to

app.controller('HomeCtrl', ['$scope', '$resource', function ($scope, $resource) {
     $scope.testText = 'testabc';
}])