title: Creating a modal window to load data with AngularJS
body: <p>I've been trying to load data inside a modal window using AngularJS but I'm not sure how to do that. I need the url also to change when the link is clicked and the data to load inside a modal window instead of loading a new page.</p>
  
  <p>I have tried using the jQuery Facebox plugin but it doesnt seem to work, I'm also using the twitter bootstrap modal component.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;div class="subnav span12" id="post-main-container" ng-controller="PostsController"&gt;
    &lt;div class="btn-group pull-left span5" id="sort-nav"&gt;
      &lt;a class="btn active"&gt;Popular&lt;/a&gt;
      &lt;a class="btn"&gt;Recent&lt;/a&gt;
      &lt;a class="btn"&gt;Favorite&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="btn-group pull-right " id="view-nav"&gt;
      &lt;a class="btn" id="2col"&gt;&lt;i class="icon-th-large"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="btn active" id="4col"&gt;&lt;i class="icon-th"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="btn" id="6col"&gt;&lt;i class="icon-th-list"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="btn-group pull-right"&gt;
      &lt;a id="reload" class="btn"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="btn"&gt;&lt;i class="icon-random"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="row-fluid span12" id="img-container"&gt;
      &lt;ul class="unstyled" id="image-container"&gt;
        &lt;li class="post-container box2" ng-repeat="post in posts"&gt;
          &lt;div class="post-btns" style="display:none;"&gt;
            &lt;a class="btn btn-mini" href="#"&gt;Share&lt;/a&gt;
            &lt;a class="btn btn-mini" href="#"&gt;Add&lt;/a&gt;
          &lt;/div&gt;
          &lt;a href="#/posts/{{post.id}}"&gt;
            &lt;img ng-src="{{post.image}}"&gt;
          &lt;/a&gt;
          &lt;p class="post-snippet" style="display:none;"&gt;{{post.description}}&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to load the <code>"#/posts/{{post.id}}"</code> in a modal window.</p>