AngularJS controller is not a function, got undefined

Question

Hi I am brand new to angular. I'm just trying to add some hardcoded data to a table, and I'm getting 2 errors when I try to do it. 1. Uncaught ReferenceError: LookUpCtrl is not defined 2. Error: [ng:areq] Argument 'lookup.controller' is not a function, got undefined

Here is my controller lookup.controller.js

(function () {

'use strict';

angular
    .module('crm.ma')
    .controller('LookUpCtrl', LookUpCtrl);

function LookupCtrl() {
    var vm = this;

    vm.results = [
        {
            accountId: 1,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        },
        {
            accountId: 2,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        }
    ];

}
}());

Here's my view lookup.html

<div>
<div>Lookup Results</div>
<table>
    <thead>
        <tr>
            <td>Acc. ID</td>
            <td>Acc. Name</td>
            <td>Acc Address</td>
            <td>City</td>
            <td>Zip</td>
            <td>Phone</td>
            <td>Parent Name</td>
            <td>Account Type</td>
            <td>Account Status</td>
            <td>Credit Term</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="result in vm.results">
            <td>{{ result.accountId }}</td>
            <td>{{ result.accountName }}</td>
            <td>{{ result.address }}</td>
            <td>{{ result.city }}</td>
            <td>{{ result.state }}</td>
            <td>{{ reuslt.zip }}</td>
            <td>{{ result.phone }}</td>
            <td>{{ result.parentName }}</td>
            <td>{{ result.accountType }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.creditTerm }}</td>
        </tr>
    </tbody>
</table>

if any further information is needed please let me know. Thanks.

Answer 1

You aren't calling the initialization properly. I don't know if it's possible to make a controller without $scope but i suggest you to use it. This is how to i usually initialize an angular controller. You can safely define the function earlier instead of passing it as argument like i did though

var app = angular.module('crm.ma', []).controller('LookUpCtrl', ['$scope', function($scope){   
$scope.results=[ 
        {    
            accountId: 1,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        },
        {
            accountId: 2,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '999-999-9999',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        }
    ];
}]); 

remember to use <tr ng-repeat="result in results"> in your html

Answer 2

You have a typo:

angular
    .module('crm.ma')
    .controller('LookUpCtrl', LookUpCtrl); //This should be LookupCtrl, as your function name is "LookupCtrl"

function LookupCtrl() {}; //Check the camelcase name.

So, the correct code would be:

angular
    .module('crm.ma')
    .controller('LookUpCtrl', LookupCtrl);