Создание модального окна для загрузки данных с помощью AngularJS

Я пытаюсь загрузить данные внутри модального окна с помощью AngularJS, но я не уверен, как это сделать. Мне нужно, чтобы URL-адрес также менялся при щелчке ссылки и данных для загрузки внутри модального окна вместо загрузки новой страницы.

Я пробовал использовать плагин jQuery Facebox, но он, похоже, не работает, я также использую мотальный компонент twitter bootstrap.

Ниже мой код:

<div class="subnav span12" id="post-main-container" ng-controller="PostsController">
  <div class="btn-group pull-left span5" id="sort-nav">
    <a class="btn active">Popular</a>
    <a class="btn">Recent</a>
    <a class="btn">Favorite</a>
  </div>
  <div class="btn-group pull-right " id="view-nav">
    <a class="btn" id="2col"><i class="icon-th-large"></i></a>
    <a class="btn active" id="4col"><i class="icon-th"></i></a>
    <a class="btn" id="6col"><i class="icon-th-list"></i></a>
  </div>
  <div class="btn-group pull-right">
    <a id="reload" class="btn"><i class="icon-refresh"></i></a>
    <a class="btn"><i class="icon-random"></i></a>
  </div>
  <div class="row-fluid span12" id="img-container">
    <ul class="unstyled" id="image-container">
      <li class="post-container box2" ng-repeat="post in posts">
        <div class="post-btns" style="display:none;">
          <a class="btn btn-mini" href="#">Share</a>
          <a class="btn btn-mini" href="#">Add</a>
        </div>
        <a href="#/posts/{{post.id}}">
          <img ng-src="{{post.image}}">
        </a>
        <p class="post-snippet" style="display:none;">{{post.description}}</p>
      </li>
    </ul>
  </div>
</div>

Я хочу загрузить "#/posts/{{post.id}}" в модальное окно.