Error: [ng:areq] Argument 'ModalController' is not a function, got undefined

Question

I used to have all my code in one big js file, but i separated everything -- including controllers to make it modular as my little app grows (and for learning porpoises). So my ui-bootstrap modal code is in this controller and is called and worked fine. When i split the controllers into separate files i get the error below. How do i fix?

app.js

var personApp = angular.module('PersonApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

personController.js

personApp.controller('PersonController', function ($scope, $uibModal, PersonService) {
    $scope.addPerson = function () {
        $scope.modalModel = {
            Id: 0,
            firstName: '',
            lastName: '',
            birthDate: ''
        };
        $scope.$uibModalInstance = $uibModal.open({
            templateUrl: '/Modal/AddEditPersonModal',
            controller: 'ModalController',
            scope: $scope
        })
    }

personModalController.js

personApp.controller('ModalController', ['$scope', function ($scope, $uibModalInstance) {
    $scope.close = function () {
        $scope.$uibModalInstance.close();
        var modalId = $scope.modalModel.Id;
        for (var i = 0; i < $scope.persons.length; i++) {
            var person = $scope.persons[i];
            if (person.Id === $scope.oldValues.Id) {
                $scope.persons[i].firstName = $scope.oldValues.firstName;
                $scope.persons[i].lastName = $scope.oldValues.lastName;
                $scope.persons[i].birthDate = $scope.oldValues.birthDate;
                break;
            }
        };
    };

    $scope.save = function () {
        $scope.$uibModalInstance.dismiss('cancel');
    };
}]);

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<link href="~/Content/PageSpecific/Index.css" rel="stylesheet" />
<script src="~/Scripts/PersonApp/app.js"></script>
<script src="~/Scripts/PersonApp/filters/personFilter.js"></script>
<script src="~/Scripts/PersonApp/services/personService.js"></script>
<script src="~/Scripts/PersonApp/controllers/personController.js"></script>
<script src="~/Scripts/PersonApp/controllers/personModalController.js"></script>
<script src="~/Scripts/PageSpecific/Index.js"></script>


<div ng-app="PersonApp" class="container">
    <div ng-controller="PersonController">
        <div class="mb20 mt15">
            <input type="text" placeholder="Search Person" ng-model="searchPerson" />
            <button type="button" class="btn btn-primary pull-right mb15 mr20" data-toggle="modal" ng-model="addPersonModel" ng-click="addPerson()">Add New</button>
        </div>

        <table class="table header-fixed">
            <thead>
                <tr>
                    <th ng-click="sortData('Id')">
                        ID <div ng-class="getSortClass('Id')"></div>
                    </th>
                    <th ng-click="sortData('firstName')">
                        First Name <div ng-class="getSortClass('firstName')"></div>
                    </th>
                    <th ng-click="sortData('lastName')">
                        Last Name <div ng-class="getSortClass('lastName')"></div>
                    </th>
                    <th ng-click="sortData('birthDate')">
                        BirthDate <div ng-class="getSortClass('birthDate')"></div>
                    </th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in filteredPersons | orderBy: sortColumn:reverseSort | filter : searchPerson">
                    <td>{{person.Id}}</td>
                    <td>{{person.firstName}}</td>
                    <td>{{person.lastName}}</td>
                    <td>{{person.birthDate | date:"MM/dd/yyyy"}}</td>
                    <td>
                        <a href="" data-toggle="icon-tooltip" data-placement="bottom" title="Edit Record" ng-model="editPersonModel" ng-click="editPerson(person)"><span class="fa fa-pencil-square-o"></span></a>
                        <a href="" data-toggle="icon-tooltip" data-placement="bottom" title="Remove Record" ng-model="removePersonModel" ng-click="removePersonDialog(person)"><span class="fa fa-remove"></span></a>
                    </td>
                </tr>
            </tbody>
        </table>
        <ul uib-pagination total-items="persons.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" items-per-page="numPerPage" num-pages="numPages"></ul>
        <pre>Page: {{currentPage}} / {{numPages}}</pre>
    </div>
</div>
<style>
</style>

Answer 1

Was a simple mistake on my part. Changed the order of referenced files in the index.cshtml. personController had function trying to call modalcontroller (in personmodalcontroller)

This:

<script src="~/Scripts/PersonApp/controllers/personController.js"></script>
<script src="~/Scripts/PersonApp/controllers/personModalController.js"></script>

Became this:

<script src="~/Scripts/PersonApp/controllers/personModalController.js"></script>
<script src="~/Scripts/PersonApp/controllers/personController.js"></script>

Answer 2

Re define the ModalController like this. You have not injected the $uibModalInstance dependency in your controller. the $uibModalInstance inside the function parameters are only the alias reference to your dependency. You have to inject the dependency first before aliasing the dependency.

personApp.controller('ModalController', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
    $scope.close = function () {
        $scope.$uibModalInstance.close();
        var modalId = $scope.modalModel.Id;
        for (var i = 0; i < $scope.persons.length; i++) {
            var person = $scope.persons[i];
            if (person.Id === $scope.oldValues.Id) {
                $scope.persons[i].firstName = $scope.oldValues.firstName;
                $scope.persons[i].lastName = $scope.oldValues.lastName;
                $scope.persons[i].birthDate = $scope.oldValues.birthDate;
                break;
            }
        };
    };

    $scope.save = function () {
        $scope.$uibModalInstance.dismiss('cancel');
    };
}]);

Answer 3

You missed to include,$uibModalInstance

personApp.controller('ModalController', ['$scope' function ($scope, $uibModalInstance) {
    $scope.close = function () {
        $scope.$uibModalInstance.close();
        var modalId = $scope.modalModel.Id;
        for (var i = 0; i < $scope.persons.length; i++) {
            var person = $scope.persons[i];
            if (person.Id === $scope.oldValues.Id) {
                $scope.persons[i].firstName = $scope.oldValues.firstName;
                $scope.persons[i].lastName = $scope.oldValues.lastName;
                $scope.persons[i].birthDate = $scope.oldValues.birthDate;
                break;
            }
        };
    };

    $scope.save = function () {
        $scope.$uibModalInstance.dismiss('cancel');
    };
}]);