AngularJS ui-sref not redirecting to state

Question

For some reason I cannot redirect to the next state.
genAPISettings.view.html only contains:

<div ui-view></div>

The controller only contains this:

app.controller('AdminDashboardGeneralAPISettingsController', ['$scope', 
'$state', 'llApi', function ($scope, $state, llApi) {

}]);

The state:

.state('dashboardContainer.GeneralAPISettings', {
    url: 'GeneralAPISettings',
    templateUrl: 'views/AdminDashboard/genAPISettings/genAPISettings.view.html',
    controller: 'AdminDashboardGeneralAPISettingsController'
  }

Using $state.go("dashboardContainer.GeneralAPISettings", {}); only shows me a flash of redirecting to the state, but then quickly redirects me to the precious state. Using <a ui-sref = "dashboardContainer.GeneralAPISettings">General API</a> does not redirect the page at all. However, changing the url manually to /GeneralAPISettings does correctly change to this state.

Answer 1

You might have an ui-sref on the container, causing that sref to trigger instead of the one that you wanted.

For example, if your code was like this:

<div ui-sref="state1"><a ui-sref"state2">Link</a></div>

When clicking on the Link, you might expect to go to state2, but instead go to state1.

Source: I've encountered a similar problem.