Bootstrap Modal window with custom URL in AngularJS (ui.bootstrap.modal with ui-router)

1modalStateProvider.js

/**
 * Modal provider. Adds state which will open a modal.
 * Opens or closes modal on URL change.
 */
app.provider('modalState', function($stateProvider) {
  var provider = this;
  var modalResult;
  this.$get = function() {
    return provider;
  };
  this.state = function(stateName, options) {
    var modalInstance;
    $stateProvider.state(stateName, {
      url: options.url,
      onEnter: ['$modal', '$state', function($modal, $state) {
        modalInstance = $modal.open(options);
        // When the modal uses $close({..}), the data (=result) will be assigned to the parent state as 'modalResult'.
        modalInstance.result.then(function(result) {
          modalResult = result;
        }).finally(function() { // modal closes
          if(modalResult) { 
            $state.get('^').modalResult = modalResult;
          }
          modalInstance = modalResult = null;
          if ($state.$current.name === stateName) {
            $state.go('^'); // go to parent state 
          }
        });
      }],
      onExit: function() {
        if (modalInstance) {
          modalInstance.close();
        }
      }
    });
    return provider;
  };
});

2router.js

$stateProvider.state('projects', {
  url: '/projects',
  controller: 'projectsCtrl',
  templateUrl: '/views/projects/index.html'
});
/**
 * When opening /projects/new the Projects Page will be behind the Projects New Modal.
 * (projects is parent state of projects.new - this is how angular.ui router works)
 */
modalStateProvider.state('projects.new', {
  url: '/new',
  controller: 'projectsNewCtrl',
  templateUrl: '/views/projects/new.html'
});

3projectsCtrl.js

app.controller('projectsNewCtrl', function ($scope, Project) {
  $scope.project = new Project();

  $scope.createProject = function() {
    $scope.project.$save(function(data) { // save success returns Project Object
      // Closes modal and sets modalResult - $close() is automatically availabe on $scope through ui.bootstrap.modal
      $scope.$close(data);  
    });
  });
});

app.controller('projectsCtrl', function ($scope, $state) {
  $scope.projects = [];

  // Add new created project to projects array when there is a modalResult
  $scope.$watch( function () { return $state.current.modalResult; }, function (result) {
    if(result) { // it may be necessary to add a check if the result is really a Project Obj (if there are more modals with `projects` as parent state!)
      $scope.projects.push(result);
    }
  });
});

I found different stackoverflow questions with different solutions[1][2], but what I want to show is not only the solution of the main problem but also how you can use it to update the page behind the modal when the modal closes.

[1] http://stackoverflow.com/questions/24713242/using-ui-router-with-bootstrap-ui-modal
[2] http://stackoverflow.com/questions/13812962/modal-window-with-custom-url-in-angularjs

Thank your for the solution! Just what i needed