title: Angular UI Router - Dynamic states get double slashes when navigated to with ui-sref
body: <p>I'm creating a CMS system so I want the states to be dynamically created. Since you can't make http requests within the config phase I decided to add my routes in the .run() function as described here: <a href="http://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app" rel="nofollow">http://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app</a></p>
  
  <p>Now when I display a list of links in my navigation partial using the ui-sref directive the url that is appended has 2 forward slashes instead of one. The controller and everything is called accordingly but I can't seem to get rid of the double slashes. Any ideas?</p>
  
  <p>Here is the relevant code:</p>
  
  <p>app.js</p>
  
  <pre><code>var $stateProviderReference;
  
  angular.module('app', [
      'ui.router',                // Angular UI Routing
      'ngStorage',                // Angular Storage (local, cookies, session)
      'ngAnimate',                // Angular Animation
      'angular-loading-bar',      // Angular Loading Bar
      'restangular',              // Restangular
      'angular.assets.injector',  // Custom assets injector
  ])
  .config(function($stateProvider, $urlRouterProvider, RestangularProvider, $httpProvider, cfpLoadingBarProvider){
  
      // Save a reference of our stateProvider
      $stateProviderReference = $stateProvider;
  
      // Irrelevant configuration
  
      // States (routes)
      $stateProvider
  
          /*
           |
           | Frontend
           |
           */
          .state('frontend', {
              url: '/',
              views: {
                  '': { 
                      templateUrl: 'app/views/frontend/templates/default/bootstrap.html',
                      controller: 'FrontendCtrl'
                  },
                  'nav@frontend': {
                      templateUrl: 'app/views/frontend/templates/default/partials/navigation.html',
                      controller: 'NavCtrl',
                      resolve: {
                          pages: function(PageService){
                              return PageService.all();
                          }
                      }
                  },
                  'footer@frontend': {
                      templateUrl: 'app/views/frontend/templates/default/partials/footer.html',
                      controller: 'FooterCtrl'
                  },
                  'page@frontend': {
                      templateUrl: 'app/views/frontend/pages/page.html',
                      controller: 'PageCtrl'
                  }
              }
          });
  
  .run(function($rootScope, $location, $state, $stateParams, AuthService, CSRF_TOKEN, PageService){
  
      // Retrieve all the pages
      PageService.all().then(function(pages){
  
      // Loop through all the pages
      angular.forEach(pages, function(page){
  
          // If this is not the homepage
          if( page.routeName !== 'frontend' )
          {
              // Add a state to our stateProvider
              $stateProviderReference.state(page.routeName, {
                  // Set the desired url
                  url: page.url,
                  // Views that we are populating
                  views: {
                      // Override the page view partial
                      'page@frontend': {
                          templateUrl: 'app/views/frontend/pages/page.html',
                          controller: 'PageCtrl'
                      }
                  }
              });
          }
  
      });
  
  });
  </code></pre>
  
  <p>navigation.html partial</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
      &lt;li ng-repeat="page in pages"&gt;
          &lt;a ng-class="{'active': isActive({{page.routeName}})}" ui-sref="{{ page.routeName }}"&gt;{{ page.title }}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Page data being retrieved from the db is formatted like this:</p>
  
  <pre><code>{
      id: 1,
      routeName 'frontend.home',
      title: 'Homepage',
      url: '/home',
      metaData: {
          tags: "some random tags",
          desc: "some random description"
      },
      content: "Html goes here",
      deletable: 'yes' // or 'no'
  }
  </code></pre>
  
  <p>So everything seems to work except for the double slashes. When I click on the link generated for the above sample code it will send me to the following url:</p>
  
  <pre><code>http://localhost/CMSv2/public/#//home
  </code></pre>
  
  <p>instead of </p>
  
  <pre><code>http://localhost/CMSv2/public/#/home
  </code></pre>
  
  <p>I have tried removing the forward slash from the routeName property and then it does not append the double slashes but the controller can't be reached anymore and everything seems to break.</p>