I'm having trouble loading data into a modal window using AngularJS. I want the URL to change when a link is clicked and have the data load into a modal window instead of a new page.
I attempted to use the jQuery Facebox plugin, but it doesn't seem to be working. I am also utilizing the Twitter Bootstrap modal component.
Here is the code I have:
<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>
I am aiming to load the content from "#/posts/{{post.id}}" in a modal window.