Modal nested states with ui-router

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.9.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.min.js"></script>
    <script data-require="angular-ui-router@0.2.7" data-semver="0.2.7" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ui-view=""></div>
  </body>

</html>


angular.module('app', ['ui.router', 'ui.bootstrap'])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/');
    
    var ponies = [{
      id: 0,
      name: 'Griotte'
    }, {
      id: 1,
      name: 'Eole'
    }, {
      id: 2,
      name: 'Rox'
    }];
    
    $stateProvider
      .state('list', {
        url: '/',
        template: '<ul><li ng-repeat="pony in ponies"><a ui-sref="view({id: pony.id})">{{ pony.name }}</a></li></ul>',
        controller: function($scope) {
          $scope.ponies = ponies;
        }
      })
      .state('modal', {
        abstract: true,
        parent: 'list',
        url: '',
        onEnter: ['$modal', '$state', function($modal, $state) {
            console.log('Open modal');
            $modal.open({
              template: '<div ui-view="modal"></div>',
              backdrop: false,
              windowClass: 'right fade'
            }).result.finally(function() {
              $state.go('list');
          });
        }]
      })
      .state('view', {
        url: ':id',
        parent: 'modal',
        views: {
          'modal@': {
            template: '<h1>{{ pony.name }}</h1><br />\
            <a ui-sref="edit({id: pony.id})">Edit</a><br />\
            <a href="#" ng-click="$close()">Close</a>',
            controller: function($scope, pony) {
              $scope.pony = pony;
            },
            resolve: {
              pony: function($stateParams) {
                return ponies[$stateParams.id];
              }
            }
          }
        }
      })
      .state('edit', {
        url: ':id/edit',
        parent: 'modal',
        views: {
          'modal@': {
            template: '<h1>Edit {{ pony.name }}</h1><br /> \
              <a ui-sref="view({id: pony.id})">View</a> <br />\
              <a href="#" ng-click="$close()">Close</a>',
            controller: function($scope, pony) {
              $scope.pony = pony;
            },
            resolve: {
              pony: function($stateParams) {
                return ponies[$stateParams.id];
              }
            }
          }
        }
      });
    }]);

/* Styles go here */