AngularJS 1.2.x

var app = angular.module('plunker', [
  'ui.router',
  'ct.ui.router.extras',
  'plunker.runtime'
]);

app.config(function($stateProvider, $stickyStateProvider, $futureStateProvider, $urlRouterProvider) {

  // default route
  $urlRouterProvider.otherwise('/');

  // possible states
  $stateProvider.
  state('App', {
    url: '/',
    views: {
      'main': {
        template: 'Testing behavior with Sticky States, Children, Future States <br>and the correct way to use ui-views.<div ui-view="static"></div><div ui-view="sticky"></div><div ui-view="infiniteSticky"></div>'
      }
    }
  }).
  state('App.static', {
    url: 'static',
    views: {
      'static': {
        template: '<h1>Static</h1>'
      }
    }
  }).
  state('App.sticky', {
    url: 'sticky',
    views: {
      'sticky': {
        template: '<h1>Sticky</h1><div ui-view="child1"></div><div ui-view="child2"></div>'
      }
    },
    sticky: true,
    deepStateRedirect: {
      default: 'App.sticky'
    }
  }).
  state('App.sticky.child', {
    url: '/child',
    title: 'Sticky child',
    views: {
      'child1': {
        template: '<h3>Sticky child</h3><p>Different ui-view</p>'
      }
    },
    sticky: true
  }).
  state('App.sticky.child2', {
    url: '/child2',
    title: 'Sticky child 2',
    views: {
      'child2': {
        template: '<h3>Sticky child 2</h3><p>Different ui-view</p>'
      }
    },
    sticky: true
  }).
  state('App.infiniteSticky', {
    url: 'infiniteSticky',
    views: {
      'infiniteSticky': {
        template: '<h1>Runtime generated Sticky States</h1><div id="children"><div ng-repeat="child in infiniteStickyChildren" ui-view="{child.viewName}"></div></div>'
      }
    },
    sticky: true,
    deepStateRedirect: {
      default: 'App.infiniteSticky'
    }
  });

});

app.run(function($rootScope, $state, $window, $timeout, $runtimeStates) {
  $rootScope.$state = $state;
  $rootScope.$on("$stateChangeStart", function(toState) {
    //console.log(toState);
  });
  $rootScope.$on("$stateChangeSuccess", function(toState) {
    $rootScope.current = $state.current.name;
    //console.log(toState);
  });

  $rootScope.infiniteStickyChildren = [];

  $rootScope.newSticky = function() {
    
    var i = $rootScope.infiniteStickyChildren.length + 1; 
    var target = 'child' + i;
    
    $rootScope.infiniteStickyChildren[i - 1] = {
      viewName: target
    };
    //console.log($rootScope.infiniteStickyChildren);
    $runtimeStates.addState(target, null, null);
    $state.go('App.infiniteSticky.' + target);
  }
});

var runtime = angular.module('plunker.runtime', [
  'ui.router',
  'ct.ui.router.extras'
]);

runtime.provider('$runtimeStates', function ($stateProvider) {
  // runtime dependencies for the service can be injected here, at the provider.$get() function.
  this.$get = function($q, $timeout, $state) { // for example
    return {
      addState: function(title, controllerAs, templatePrefix) {
        var state = {
          name: 'App.infiniteSticky.' + title,
          url: '/' + title,
          views: {},
          sticky: true
        };
        state.views[title] = {
          template: '<h3>Runtime generated Sticky ' + title + '</h3>'
        };
        $stateProvider.state(state);
      }
    }
  }
});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@3.3.6" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script data-require="ui-router@*" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
    <script src="https://rawgit.com/christopherthielen/ui-router-extras/0.1.2/release/ct-ui-router-extras.js" data-semver="0.1.2" data-require="ui-router-extras@*"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker">
    <div>
      <p>Current state: {{current}}</p>
      <nav class="col-xs-4">
        <ul class="nav nav-pills nav-stacked text-left">
          <li>
            <a class="btn" ui-sref="App.static">Static</a>
          </li>
          <li>
            <a class="btn" ui-sref="App.sticky">Sticky</a>
          </li>
          <li>
            <a class="btn" ng-href="#" ng-click="newSticky()">New Sticky State</a>
          </li>
          <li>
            <a class="btn" ui-sref="App.infiniteSticky.child1">Future Sticky Child 1</a>
          </li>
          <li>
            <a class="btn" ui-sref="App.infiniteSticky.child2">Future Sticky Child 2</a>
          </li>
        </ul>
      </nav>
      <div ui-view="main"></div>
    </div>
  </body>

</html>

/* Put your css in here */