Undefined Controller AngularJS

Question

My template is loading but I get an error that the controller is undefined. The controller does exist in my sources exactly at the location defined. What is wrong with this code?

Error: [ng:areq] Argument '/Scripts/controllers/wizardNavigationCtrl.js' is not a function, got undefined
http://errors.angularjs.org/1.2.14/ng/areq?p0=%2FScripts%2Fcontrollers%2FwizardNavigationCtrl.js&p1=not%20aNaNunction%2C%20got%20undefined 

Index.html (root page)

<div class="container">
    <div ui-view></div>
</div>

wizardLayout.html

<div>
    <ul class="nav nav-tabs">
        <li ng-repeat="model in models" ng-class="active: model.active">
            <a ui-sref=".model-{{model.name}}">model.name</a>
        </li>
        <li ng-class="navStep=='addnew' ? 'active' : ''">
            <a ui-sref=".newmodel"><span class="glyphicon glyphicon-plus"></span></a>
        </li>
        <li><a ui-sref=".other">Other</a></li>
        <li><a ui-sref=".customer">Customer Info</a></li>
        <li><a ui-sref=".shipping">Shipping Info</a></li>
        <li><a ui-sref=".review">Review</a></li>
    </ul>
</div>

<div ui-view>
</div>

app.js:

'use strict';

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('wizard', {
            url: '/',
            templateUrl: 'Scripts/templates/wizardLayout.html',
            controller: 'Scripts/controllers/wizardNavigationCtrl.js'
        })
        .state('wizard.newmodel', {
            url: '/newmodel',
            templateUrl: 'Scripts/templates/wizardModel.html',
            controller: 'Scripts/controllers/wizardModelCtrl.js'
        })
        .state('wizard.other', {
            url: '/other',
            templateUrl: 'Scripts/templates/wizardOther.html',
            controller: 'Scripts/controllers/wizardOtherCtrl.js'
        })
        .state('wizard.customer', {
            url: '/customer',
            templateUrl: 'Scripts/templates/wizardCustomer.html',
            controller: 'Scripts/controllers/wizardCustomerCtrl.js'
        })
        .state('wizard.shipping', {
            url: '/shipping',
            templateUrl: 'Scripts/templates/wizardShipping.html',
            controller: 'Scripts/controllers/wizardShippingCtrl.js'
        })
        .state('wizard.review', {
            url: '/review',
            templateUrl: 'Scripts/templates/wizardReview.html',
            controller: 'Scripts/controllers/wizardReviewCtrl.js'
        });
    }]);

wizardNavigationCtrl.js

myApp.controller('wizardNavigationCtrl', ['wizardSvc', '$scope', function (wizardSvc, $scope) {
    alert('navigation controller! ' + wizardSvc.quote.title);
    $scope.navStep = 'addnew';
    wizardSvc.init();
}])

Answer 1

The controller should be in the format MyControllerName not the name and path to the javascript file. That in mind, in order to use the controller the javascript must have been loaded by the browser already. This requires the use of a traditional script tag because angular won't find or load these scripts for you.

Taking a snippet from your code it becomes:

    .state('wizard', {
        url: '/',
        templateUrl: 'Scripts/templates/wizardLayout.html',
        controller: 'wizardNavigationCtrl'
    })

And somewhere in the page you need:

<script src="Scripts/controllers/wizardNavigationCtrl.js" type="text/javascript"></script>

Hope that helps!