AngularJS 1.2.x

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

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="futureSticky"></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.futureSticky', {
    url: 'futureSticky',
    views: {
      'futureSticky': {
        template: '<h1>FutureState Sticky</h1><div ui-view="child1"></div><div ui-view="child2"></div>'
      }
    },
    sticky: true,
    deepStateRedirect: {
      default: 'App.futureSticky'
    }
  });
  var future1 = {
    "stateName": "App.futureSticky.child1",
    "type": "iframe",
    "urlPrefix": "/child1",
    "view": "child1",
    "template": "<h3>Future State Sticky 1</h3><p>Different ui-view</p>"
  };
  var future2 = {
    "stateName": "App.futureSticky.child2",
    "type": "iframe",
    "urlPrefix": "/child2",
    "view": "child2",
    "template": "<h3>Future State Sticky 2</h3><p>Different ui-view</p>"
  };
  $futureStateProvider.futureState(future1);
  $futureStateProvider.futureState(future2);


  $futureStateProvider.stateFactory('iframe', iframeStateFactory);
});

app.run(function($rootScope, $state, $window, $timeout) {
  $rootScope.$state = $state;
  $rootScope.$on("$stateChangeSuccess", function() {});
});

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

function iframeStateFactory($q, futureState) {
  var state = {
    name: futureState.stateName,
    url: futureState.urlPrefix,
    views: {},
    sticky: true
  };
  state.views[futureState.view] = { template: futureState.template };
  //console.log(state);
  return $q.when(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 ng-controller="MainCtrl">
      <p>Hello {{name}}!</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" ui-sref="App.sticky.child">Sticky child</a>
          </li>
          <li>
            <a class="btn" ui-sref="App.sticky.child2">Sticky child 2</a>
          </li>
          <li>
            <a class="btn" ui-sref="App.futureSticky">Future Sticky</a>
          </li>
          <li>
            <a class="btn" ui-sref="App.futureSticky.child1">Future Sticky Child 1</a>
          </li>
          <li>
            <a class="btn" ui-sref="App.futureSticky.child2">Future Sticky Child 2</a>
          </li>
        </ul>
      </nav>
      <div ui-view="main"></div>
    </div>
  </body>

</html>

/* Put your css in here */