javascript - URLの変更時にAngular UI-Routerがモーダルウィンドウを開く

Question

プロジェクトで angular-ui-router と angular-bootstrap を使用しています。

次のユースケースを実装したい：

ユーザーが「編集」ボタンをクリックすると、UI-Router は URL を変更し、モーダル ウィンドウを開きます。ブラウザの戻るボタンで戻ると、モーダルウィンドウが閉じてしまいます。

モーダル ウィンドウが開いているときにユーザーがページをリロードすると、アプリケーションはモーダル ウィンドウのコンテンツをメインの ui-view コンテナーにレンダリングする必要があります。

この種雄牛で見ることができるこの使用例: http://canopy.co/ (アイテムをクリックしてページをリロードしてみてください)

質問: 上記の動作を実装するにはどうすればよいですか?

これが私のjsFiddle http://jsfiddle.net/sloot/ceWqw/3/です

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('app', {
      url: '/',
      controller: 'AppCtrl',
      templateUrl: '/views/app.html'
    })
    .state('item', {
      url: '/profile',
      controller: 'ItemCtrl',
      templateUrl: '/views/item.html'
    });
})
.controller('AppCtrl', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: '/views/item.html'
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller('ItemCtrl', function(){});