Controller function defined but not catched by angularjs

Question

I have a plunk @ http://plnkr.co/edit/VnFmKqnFh0vOFARvIgVB?p=preview

(function () {
    'use strict';

    angular
        .module('app')
        .controller('MainController', MainController);
 MainController.$inject = ['DataService', '$rootScope', '$scope', 'timeFilterValues', '$localStorage'];
    function MainController(DataService, $rootScope, $scope, timeFilterValues, $localStorage) {

        var vm = this;

        vm.currentFilter = {
            selections: $localStorage.getObject('currentSelections') || [],
            vendors: $localStorage.getObject('currentVendors') || [],
            segments: $localStorage.getObject('currentSegments') || [],
            units: $localStorage.getObject('currentUnits') || [],
            categories: $localStorage.getObject('currentCategories') || [],
            classes: $localStorage.getObject('currentClasses') || [],
            years: $localStorage.getObject('currentYears') || {},
            buyers: $localStorage.getObject('currentBuyers') || [],
            evp: $localStorage.getObject('currentEvp') || [],
            quarters: $localStorage.getObject('currentQuarters') || [],
            months: $localStorage.getObject('currentMonths') || []
        };

        vm.vendors = $localStorage.getObject('vendors') || [];
        vm.segments = $localStorage.getObject('segments') || [];
        vm.categories = $localStorage.getObject('categories') || [];
        vm.units = $localStorage.getObject('units') || [];
        vm.buyers = $localStorage.getObject('buyers') || [];
        vm.evp = $localStorage.getObject('evp') || [];
        vm.defaultSelections = $localStorage.getObject('selections') || [];

        vm.years = timeFilterValues.years;
        vm.quarters = timeFilterValues.quarters;
        vm.months = timeFilterValues.months;

        vm.filterData = new Object();
        vm.filterData.vendors = $localStorage.getObject('selectedVendors') || '';
        vm.filterData.segments = $localStorage.getObject('selectedSegments') || '';
        vm.filterData.categories = $localStorage.getObject('selectedCategories') || '';
        vm.filterData.units = $localStorage.getObject('selectedUnits') || '';
        vm.filterData.buyers = $localStorage.getObject('selectedBuyers') || '';
        vm.filterData.evp = $localStorage.getObject('selectedEvp') || '';
        vm.filterData.date_start = $localStorage.getObject('selectedDateStart') || '';
        vm.filterData.date_end = $localStorage.getObject('selectedDataEnd') || '';
        vm.filterData.route = $localStorage.getObject('selectedRoute') || '';
        vm.filterData.currentToggle = $localStorage.getObject('currentToggle') || 'segments';
        vm.filterData.crossToggle = $localStorage.getObject('crossToggle') || 'evp';
        vm.filterData.years = $localStorage.getObject('selectedYears') || '';
        vm.filterData.quarters = $localStorage.getObject('selectedQuarters') || '';
        vm.filterData.months = $localStorage.getObject('selectedMonths') || '';

        vm.filterData.subroute = undefined;



    }

})();

where a controller is been defined and used further but I'm stuck at finding this controller where it gives this error

Error: [ng:areq] Argument 'MainController' is not a function, got undefined http://errors.angularjs.org/1.4.4/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined at REGEX_STRING_REGEXP (angular.js:68) at assertArg (angular.js:1795) at assertArgFn (angular.js:1805) at angular.js:9069 at setupControllers (angular.js:8133) at nodeLinkFn (angular.js:8173) at compositeLinkFn (angular.js:7637) at compositeLinkFn (angular.js:7641) at publicLinkFn (angular.js:7512) at angular.js:1660 as error

Answer 1

I believe it is your d3.js .

You've defined your app and it's dependencies in script.js however in d3.js you've added the empty array when accessing the module, removing this fixes the issue.

so in d3.js from

angular.module('app', [])
        .factory('d3Service'...

to

angular.module('app')
        .factory('d3Service'...

I think angular thinks you are re-defining your application. As the main controller is defined before d3.js i assume angular deletes it, then the ng-controller directive is looking for something that isn't there.