I am new to Angularjs and I was following a tutorial but I got the error in the title.

HTML code:

<div data-ng-app="myApp">
    <div data-ng-controller="MyCtrl">
    <form>
        <table>
        <tr style="font-weight: bold">
          <td>ID</td>
          <td>Name</td>
          <td>Surname</td>
          <td>House</td>
          <td>Address</td>
          <td>Locality</td>
          <td>Contact</td>
          <td>Contact 2</td>
          <td>Contact 3</td>
          <td>Reply</td>
          <td>Edit</td>
        </tr>
        <tr data-ng-repeat="person in persons">
            <td>{{person.ID}}</td>
            <td>{{person.Name}}</td>
            <td>{{person.Surname}}</td>
            <td>{{person.House}}</td>
            <td>{{person.Address}}</td>
        </tr>


        </table>
    </form>
    </div>
</div>

<script type="text/javascript">
    //Defining a Angular module
    var myApp = angular.module('myApp', []); 
    //Defining a Angular Controller 
    myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { 

    //Retrieving the List of people 
    GetPersons(); 
    //Displaying the Save button 
    $scope.DisplaySave = true; 

    function GetPersons() { 
    //Defining the $http service for getting the people 
    $http({
     method: 'GET', url: '/api/data' 
     }). 
     success(function (data) {
      if (data != null || data != 'undefined') { 
        //Assigning people data to the $scope variable
        $scope.persons = data; 
        //Clearing the Person object in create context and Showing default Gender(Male) Checked 
        $scope.newperson = { 
        Id: ''
        }; 
        } 
        }) 
        .error(function (error) { 
            //Showing error message 
            $scope.status = 'Unable to retrieve people' + error.message; 
        });
    }
} ]);
</script>

API COntroller:

public class DataController : ApiController
    {
        //GET api/data

        public IEnumerable<CommonLayer.Telesales> GetPeople()
        {
            return new BusinessLayer.Telesales().getUserSession(User.Identity.Name).AsEnumerable();
        }

More error details:

magicplayer:init: set version: 1.0.1
adme: onDOMStart: got code: user_key=f52009a2292c2b524ac9af2801caef4c443d7cdc7697dff171f77b3c81cd26fa gender=1 age=4
Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined
.2.18/ng/areq?p0=MyCtrl&p1=not%20a%20function%2C%20got%20undefined
    at http://localhost:12570/Scripts/angular.js:78:12
    at assertArg (http://localhost:12570/Scripts/angular.js:1475:11)
    at assertArgFn (http://localhost:12570/Scripts/angular.js:1485:3)
    at http://localhost:12570/Scripts/angular.js:7198:9
    at http://localhost:12570/Scripts/angular.js:6592:34
    at forEach (http://localhost:12570/Scripts/angular.js:327:20)
    at nodeLinkFn (http://localhost:12570/Scripts/angular.js:6579:11)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6028:13)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:12570/Images/accent.png
onMessageFromBackground: method=statPixel

what am I doing wrong? I search other solutions but it seems like my problem is a bit different.

I am new to Angularjs and I was following a tutorial but I got the error in the title.

HTML code:

<div data-ng-app="myApp">
    <div data-ng-controller="MyCtrl">
    <form>
        <table>
        <tr style="font-weight: bold">
          <td>ID</td>
          <td>Name</td>
          <td>Surname</td>
          <td>House</td>
          <td>Address</td>
          <td>Locality</td>
          <td>Contact</td>
          <td>Contact 2</td>
          <td>Contact 3</td>
          <td>Reply</td>
          <td>Edit</td>
        </tr>
        <tr data-ng-repeat="person in persons">
            <td>{{person.ID}}</td>
            <td>{{person.Name}}</td>
            <td>{{person.Surname}}</td>
            <td>{{person.House}}</td>
            <td>{{person.Address}}</td>
        </tr>


        </table>
    </form>
    </div>
</div>

<script type="text/javascript">
    //Defining a Angular module
    var myApp = angular.module('myApp', []); 
    //Defining a Angular Controller 
    myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { 

    //Retrieving the List of people 
    GetPersons(); 
    //Displaying the Save button 
    $scope.DisplaySave = true; 

    function GetPersons() { 
    //Defining the $http service for getting the people 
    $http({
     method: 'GET', url: '/api/data' 
     }). 
     success(function (data) {
      if (data != null || data != 'undefined') { 
        //Assigning people data to the $scope variable
        $scope.persons = data; 
        //Clearing the Person object in create context and Showing default Gender(Male) Checked 
        $scope.newperson = { 
        Id: ''
        }; 
        } 
        }) 
        .error(function (error) { 
            //Showing error message 
            $scope.status = 'Unable to retrieve people' + error.message; 
        });
    }
} ]);
</script>

API COntroller:

public class DataController : ApiController
    {
        //GET api/data

        public IEnumerable<CommonLayer.Telesales> GetPeople()
        {
            return new BusinessLayer.Telesales().getUserSession(User.Identity.Name).AsEnumerable();
        }

More error details:

magicplayer:init: set version: 1.0.1
adme: onDOMStart: got code: user_key=f52009a2292c2b524ac9af2801caef4c443d7cdc7697dff171f77b3c81cd26fa gender=1 age=4
Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.18/ng/areq?p0=MyCtrl&p1=not%20a%20function%2C%20got%20undefined
    at http://localhost:12570/Scripts/angular.js:78:12
    at assertArg (http://localhost:12570/Scripts/angular.js:1475:11)
    at assertArgFn (http://localhost:12570/Scripts/angular.js:1485:3)
    at http://localhost:12570/Scripts/angular.js:7198:9
    at http://localhost:12570/Scripts/angular.js:6592:34
    at forEach (http://localhost:12570/Scripts/angular.js:327:20)
    at nodeLinkFn (http://localhost:12570/Scripts/angular.js:6579:11)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6028:13)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:12570/Images/accent.png
onMessageFromBackground: method=statPixel

what am I doing wrong? I search other solutions but it seems like my problem is a bit different.

• javascript
• asp.net-mvc
• angularjs

• where is ur controller named "MyCtrl"??? – Kartikeya Khosla Commented Jul 24, 2014 at 8:58
• yes..................... – Kartikeya Khosla Commented Jul 24, 2014 at 9:03
• @KartikeyaKhosla I tried changing name from MyCtrl to Data but still the error – rikket Commented Jul 24, 2014 at 9:07
• Not exactly sure what I changed (apart from removing the "s" at persons in your loop), but it seems to be working : JSBin – Goodzilla Commented Jul 24, 2014 at 9:44
• @Goodzilla Yes I forgot to remove the "s" which I did on mine but I still get the same error. the error happens on the myApp.controller( line as the GetPersons() is not even being called – rikket Commented Jul 24, 2014 at 9:52

11 Answers 11

Turns out I had and the following html tag in the layout page which was returning this error

<html lang="en ng-app">

Removed the ng-app from the tag and code works perfectly

In my case I had just forgotten to add a controller script to index.html

I got this kind of error when I misspelled my controller name. It was capitalized in the js file, but not in the ng-controller tag in the html file.

Sometimes this may occur when we are not binding module/controller to DOM properly. I came to same error and I found that my ng-app was assigned blank

<html ng-app="">

I needed to provide module name. I gave and it worked!

<html ng-app="app">

I got this error using a Material Design dialog in my Angularjs controller with a very hard to find typo:

templateUrl: 'template.html';

When I replaced the semicolon with the proper comma, it solved the problem.

templateUrl: 'template.html',

Sometime we use same module name in factory,controllers and main module.so, this is main reason it will give error Error: [ng:areq] Argument,don't use same module name when u call calling your services,controllers,factory.

I drove myself crazy over this for a couple of hours after checking and double checking all the suggestions. But, it turned out that once I cleared my Chrome browser data (cookies, hosted app data and cached image and files), the error went away. Even a refresh does not seem to clear all the listed items enough .

I used <html ngapp> along with angular 1.4.8

Changed it to 1.2.8 and got rid of the error.

My html had <div class ="container" ng-controller="AppCtrl">

and I had a controller.js file with the function

function AppCtrl(){ console.log("Hello from controller") }

In my case:

• by mistake I had two body tags <body ng-controller="CtrlWasNotFound"> <body></body </body>
• not only that - the app.js returned the HTML of index.html ( was using gulp and had a configuration issue

To fix this problem, I had to discover that I misspelled the name of the controller in the declaration of Angular routes:

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })

<sript

instead of

<script 

;) while linking controller.js. In my case