controller.js reference to index.js FAIL Cordova app building enviornment

This's my first time to use cordova to build my demo app.... I have set up a Controller.js in order to switch two button tabs --'search projects' n 'post a project'. U can see the picture below, enter image description here enter image description here

The problem is I cant switch bewteen two tabs if I just initialize controller function on the top of index.js. But if I but the Controller.js code inside into the top of index.js. It do the work. This make index.js too long. Could anyone know how to fix this?? Thank you

my cordova version is 6.5.0 platform is MAC Sierra 10.12.3

file root is

www/
 |---css/
 |---index.html
 |---js/
 |  |--Controller.js
 |  |--index.js
 |  |--bootstrap.min.js 
 |  |--jquery-1.11.1.min.js 
 |  |--jquery.mobile-1.4.5.min.js
 |
 |---views/
 |---img/

here is my index.js code:

var controller = null;
var app = {
// Application Constructor
initialize: function() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
       document.addEventListener("deviceready", this.onDeviceReady, false);
    } else {
        this.onDeviceReady();
    }
},  
onDeviceReady: function() {
   //We will init / bootstrap our application here
 controller = new Controller()
    },                            
}; 
app.initialize();

my Controller.js code is

Controller = function() {

var controller = {
    self: null,
    initialize: function() {
        self = this;
            this.bindEvents();
            self.renderSearchView();
    },

    bindEvents: function() {
        $('.tab-button').on('click', this.onTabClick);

    },

    onTabClick: function(e) {
        e.preventDefault();
        if ($(this).hasClass('active')) {
            return;
        }

        var tab = $(this).data('tab');
        if (tab === '#add-tab') {
            self.renderPostView();
        } else {
            self.renderSearchView();
        }
    },

    renderPostView: function() {
        $('.tab-button').removeClass('active');
        $('#post-tab-button').addClass('active');

        var $tab = $('#tab-content');
        $tab.empty();
        $("#tab-content").load("http://localhost:8080/www/views/post-project-view.html", function(data) {
            $('#tab-content').find('#post-project-form').on('submit', self.postProject);
        });
    },


    renderSearchView: function() {
        $('.tab-button').removeClass('active');
        $('#search-tab-button').addClass('active');

        var $tab = $('#tab-content');
        $tab.empty();

        var $projectTemplate = null;
        $("#tab-content").load("http://localhost:8080/www/views/post-project-view.html", function(data) {
            $projectTemplate = $('.project').remove();
    //Load projects here
        });
    }
}
controller.initialize();
return controller;
}

via J.ZHONG