Angular UI Router controllers instantiated multiple times - Direct route

Question

I have a parent / child route set up, and everything works great when I change the state in code using state.go(). The problem arises when I try to go directly to the child route using only a URL. When I do this, the controllers get initialized multiple times.

Here is my app.js

    $stateProvider
    .state('home', {
        url: "/",
        templateUrl: "Views/home.html",
        controller: 'HomeController',
        controllerAs: 'vm'
    })
    .state('ticketsMaster', {
        abstract: true,
        templateUrl: "Views/tickets-master.html",
        url: "^/performances?featureCode&theatreId",
        controller: 'TicketsMasterController',
        controllerAs: 'vm'
    })
    .state('ticketsMaster.performances', {
        url: "^/performances?featureCode&theatreId",
        templateUrl: "Views/performances.html",
        controller: 'PerformancesController',
        controllerAs: 'vm'
    })
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

home.html is my master page where I have my ui-view

I also have another ui-view on my tickets-master.html where this loads my child views (performances).

When going directly to /performances?featureCode=1111&theatreId=1 it loads my TicketsMasterController , and Performances controller 2 or 3 times.

Any help would be appreciated.

Answer 1

I found the answer here:

https://github.com/angular-ui/ui-router/issues/372

add this line to app.config:

$locationProvider.html5Mode(true).hashPrefix('!')

and include this line in the head of index.html:

<base href="/">