ngRoute worked but I wanted to switch to ui-router.... now my app does not seem to initialize

I have an app running on express and angular. I wanted to switch to ui-router to take advantage of multiple views but it does not seem to be working.

app.js

app.use(express.static(path.join(__dirname, 'public')));

app.get('/',routes.index);
app.get('/partials/:name', routes.partials);
app.get('/partials/about/:name', aboutRoutes.partials);
app.get('/about', aboutRoutes.us);
app.get('/about/:name', aboutRoutes.main);

//authentication
//app.get('/app', ensureAuthenticated ,appRoutes.app);
app.get('/app',appRoutes.app);
app.get('/app/:name',appRoutes.main);
app.get('/partials/app/:name', appRoutes.partials);
app.use('*',routes.index)

template.hjs

<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.css" />
    <link rel="stylesheet" href="/stylesheets/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="/fonts/font-awesome-4.0.3/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/stylesheets/screen.css" />
    <!-- Style for Newsticker Begin-->
    <link rel="stylesheet" href="/stylesheets/newsticker.css" />
    <link rel="stylesheet" href="/stylesheets/prism.css" />
    <link rel="stylesheet" href="/stylesheets/teamBio.css" />
    <!-- Style for Newsticker End-->
</head>
<body>
    <div >
        {{> header}}
        <div ui-view>{{> maincontent}}</div>
        {{> footer}}
        <script src="/js/jquery.min.js"></script>
        <script src="/bower_components/angular/angular.js"></script>
        <script src="/js/front.js"></script>
        <script src="/js/controllers.js"></script>
        <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script src="/js/bootstrapValidator.js"></script>
        <script src="/js/signup-init.js"></script>
        <!-- Scripts for NEWSTICKER Begin -->
        <script src="/js/prism.js"></script>
        <script src="/js/jquery.newsTicker.js"></script>
        <script src="/js/init_newsticker.js"></script>
        <!-- Scripts for NEWSTICKER End -->
        {{> signupModal}}
    </div>
</body>

</html>

front.js

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

myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise({
        redirectTo: '/'
    });

    $stateProvider.
        state('', {
            url: '/',
            templateUrl: '/partials/homepage',
            controller: 'MyCtrl1'
        }).
        state('about.detail', {
            url: '/about/:id',
            templateUrl: function(params){
                return '/partials/about/'+params.id
            },
            controller: 'MyCtrl1'
        }).
        state('funnel', {
            url: '/funnel',
            templateUrl: '/partials/funnel',
            controller: 'MyCtrl2'
        });

});

This worked fine with ngRoute but I switched so I could assign views after i got the base working again. What am I doing wrong?

I also have a link on my home page that 

<div class="col-lg-3 text-center">
                        <a ui-sref="funnel" class="btn btn-warning">TestView</a>
                    </div>

does nothing

It looks like the problem might be at $urlRouterProvider.otherwise({redirectTo: '/'});. Try changing it to $urlRouterProvider.otherwise('/'); as seen in docs https://github.com/angular-ui/ui-router/wiki/URL-Routing#otherwise-for-invalid-routes