html5 - How to pass ng-model value to anchor tag which opens an HTML overlay? -

i have scenario display many posts on html page using angularjs , every post, when clicked, shows associated data in overlay. data displayed on main page using ng-repeat tag , when 1 item clicked, html overlay, defined in same page opens.

problem:

only first result shown on every item i.e. whenever click on post different id, opens displaying first id. that's incorrect. example, if result is:

1. windsor hotel,
2. chancery
3. le merridian.

and whenever overlay opened, shows windsor all.

below code. please suggest.::

<div ng-repeat="post in allposts" style="background-color: #f8efc0" class="col-xs-10 col-md-11">     <div>         <a href="http://www.jquery2dotnet.com/2013/10/google-style-login-page-desing-usign.html">{{ post.posttext}}</a>         <div class="mic-info">             by: <a href="#">{{ post.useremail}}</a> on 2 march 2014         </div>     </div>     <div class="action">         <a href="#" class="btn btn-default btn-primary btn-xs">your post helpful                                                     <span class="glyphicon glyphicon-thumbs-up"></span></a>         <a href="#" class="btn btn-default btn-warning btn-xs active">would suggest,                                                     specific in requirement <span                                                         class="glyphicon glyphicon-thumbs-down"></span></a>         <!-- <button type="button" class="btn btn-danger btn-xs" title="delete">                                                      <span class="glyphicon glyphicon-trash"></span>                                                  </button>-->     </div>     <a href="#"         data-toggle="modal"         data-target="#t_and_c_m">comments of post!</a>     <div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"         aria-hidden="true">         <div class="modal-dialog modal-lg">             <div class="modal-content">                 <div class="modal-header">                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                     <h4 class="modal-title" id="mymodallabel">terms & conditions</h4>                 </div>                 <div class="modal-body">                     <div id="disqus_thread"></div>                     <script type="text/javascript">                         /* * * configuration variables: edit before pasting webpage * * */                          var disqus_shortname = 'pingled'; // required: replace example forum shortname                          var disqus_identifier = 'postid';                          alert(disqus_identifier);                          var disqus_url = '';                          /* * * don't edit below line * * */                         (function () {                             var dsq = document.createelement('script'); dsq.type = 'text/javascript'; dsq.async = true;                             dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';                             (document.getelementsbytagname('head')[0] || document.getelementsbytagname('body')[0]).appendchild(dsq);                         })();                          disqus_shortname = 'pingled'; // required: replace example forum shortname                          disqus_identifier = undefined;                          disqus_url = undefined;                      </script>                 </div>                 <div class="modal-footer">                     <button type="button" class="btn btn-primary" data-dismiss="modal">close</button>                 </div>             </div>             <!-- /.modal-content -->         </div>         <!-- /.modal-dialog -->     </div> 

you can try pass data bootstrap 3 modal here: passing data bootstrap modal, data id parameter: data-toggle="modal" data-id="{{post.id}}" ...