Set dynamic URL on state in AngularJS with Ui-Router -

i have ng-include rendering partials on page nature of ng-include not need state load partials. url update when ng-include updates view analytics track page change. wondering best way this.

also using angular-ui-router, makes ng-include irrelevant because of nested states; until 1 comes across situation: have large number of partials loading ng-include, lovely because need provide path partial , not massive number of different states $stateprovider file; there no custom url. such wondering following:

can ng-include update page url when loads partial without having state defined partial view

or

something solve problem altogether: there way add states have url can dynamically updated? like:

.state( 'test',  {         url: function( stateid ){     // stateid somehow passed $stateparams of new state },     templateurl: "templates/views/test.html" }) 

---

here setup far ng-include, if have ideas on how url change when ng-include renders different partial pleased.

---

::js::

// states  // self executing function (function() {  var app = angular.module( 'app', [ 'ui.router', 'nganimate' ] );  app.config( function( $stateprovider, $urlrouterprovider ) {    // if url not defined redirect login   $urlrouterprovider.when( '', "/home" );   // if nonexistant url defined redirect sign-in   $urlrouterprovider.otherwise( "/home" );    // set states   $stateprovider     .state('home', {       url: "/home",       templateurl: "templates/views/home.html"     }); }()); // self executing function end  // factory //self executing container function (function() { var listfactory = function( ) {   // declare factory return @ end of function   var factory = {};    var list =      {          list1 : [             {                  name: 'first',                 url: 'templates/views/partials/view1.html',                 id: '1'             },             {                 name: 'second',                 url: 'templates/views/partials/view2.html',                 id: '2'             },             {                 name: 'third',                 url: 'templates/views/partials/view3.html',                 id: '3'             },             {                 name: 'fourth',                 url: 'templates/views/partials/view4.html',                 id: '4'             }         ]     };      factory.getlist = function(){       return list;     };      // return factory object access data     return factory; };    angular.module( 'app' ).factory( 'listfactory', listfactory );  }());  // controller //self executing container function (function() {      var listcontroller = function ( $scope, listfactory ) {          $scope.listfactory = listfactory.getlist();         // set default list state         $scope.currentlist = 'templates/views/partials/default.html';          // function sets list url on click new scope item rendering partial view         $scope.setcurrentlist = function( url ) {             $scope.currentlist = url;         };     };      listcontroller.$inject = [ '$scope', 'listfactory' ];      angular.module('app')       .controller('listcontroller', listcontroller);  }()); 

::html::

<!-- loaded in home state.  -->  <div>     <div id="{{ list.id }}" ng-repeat="list in list.list1" ng-click="setcurrentlist( list.url )">         <p>{{ list.name }}</p>     </div> </div> <div id="list-view-container">     <div class="rotateviewanimate" ng-include src="currentlist"></div> </div> 

::rather irrelevant css::

/* have set height explicity on ui-view-container prevent collapsing during animation*/ #list-view-container {     position: relative;     min-height: 500px;     overflow: hidden; }      /* rotate in / out animation transition */ .rotateviewanimate.ng-enter, .rotateviewanimate.ng-leave {   /* settings animations display */   position: absolute!important;   left: 0!important;   right: 0!important;   -webkit-transition: 0.5s ease-in-out all;   -moz-transition: 0.5s ease-in-out all;   -o-transition: 0.5s ease-in-out all;   transition: 0.5s ease-in-out all;   transform-style: preserve-3d; }  .rotateviewanimate.ng-enter {     transform: rotatey(90deg);     opacity: 0; }  .rotateviewanimate.ng-enter-active {     transform: rotatey(0deg);     opacity:1; }  .rotateviewanimate.ng-leave {     transform: rotatey(0deg);     opacity:1; }  .rotateviewanimate.ng-leave-active {     transform: rotatey(90deg);     opacity:0; } 

---

---

alright partials when using ui-router want include

<ui-view>     <i>some content load here!</i> </ui-view> 

where want partial load.

looks have home state working correctly if want nest view have

.state('home.view1', {   url: '/notes',   templateurl: 'pages/view1.html',   controller: 'maincontroller' }) 

the full url doing nested routing */#/home/notes more info: https://github.com/angular-ui/ui-router/wiki