angularjs changing state issue

I have my app.js StateProvider configuration setup like below:

State ‘dashboard’ contains the sidebar and top navigation bar and should be active when the state dashboard.home and dashboard.addclient is active.

app.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
        .state('login', {
            url: '/',
            templateUrl: 'partials/login.html',
            controller: 'LoginController'
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'partials/dashboard.html',
            controller: 'DashboardController'
        .state('dashboard.home', {
            url: '/home',
            templateUrl: 'partials/dashboard.home.html',
            controller: 'HomeController'
        .state('dashboard.addclient', {
            url: '/addclient',
            templateUrl: 'partials/dashboard.addclient.html',
            controller: 'ClientsController'

        enabled: true,
        requireBase: false

The issue is when the user clicks on a link inside the dashboard page it calls a function which changes the state like below:

app.controller('DashboardController', function ($scope, $state) {
    $scope.AddClient = function () {

But for some reason the URL that it is trying to call looks like:



Index contains a view which the Login will get loaded into:

    <div id="view" ui-view></div>

I so when the user logs in we have another ui-view on the dashboard:

<div id="page-content-wrapper">
    <div ui-view></div>

Looks like your template URLs are relative paths because they don’t begin with ‘/’. This means that if your browser currently has http://localhost/dashboard in the address bar when you change your state to dashboard.addclient it’ll just append your template url to the current address. Instead you can try this:

.state(‘dashboard.addclient’, {
url: ‘/addclient’,
templateUrl: ‘/partials/dashboard.addclient.html’,
controller: ‘ClientsController’