title: prevent the behabiour of a link when we click on a span which is inside the link tag javascript
body: <p>Hi i am using ng repeat on a div using angualar js.
  This div has a link tag inside it which is wrapping the while tags.the a link tag also has a span tag which has a class <code>btnConatctme</code> when i click on this span then a bootstarp modal is popping up but when the page is also redirecting to the src in the link tag.i have also tried to use this</p>
  
  <pre><code>$('.btnConatctme').on('click',function(e){
      e.preventDefault();
  });
  </code></pre>
  
  <p>but still tha page is redirecting 
  what i want to do is when we click on the whole a link then the page should redirect to the src which is given in the a link tag.but when we click on <code>btnConatctme</code> span then the bootstarp modal should popup and page does not redirect to next page 
  here is my full code of the div which is inside ng-repeat </p>
  
  <pre><code>&lt;div class="todo-tasklist"  &gt;
     &lt;a href="{{ url('post-shipments/user_view') }}" class="divShipments"&gt;
          &lt;div class="todo-tasklist-item todo-tasklist-item-border-green"&gt;
              &lt;div class="col-md-12"&gt;
                &lt;img class="todo-userpic pull-left" src="{{ url('default/img/document.jpg') }}"&gt;
                &lt;div class="todo-tasklist-item-title"&gt; shipment Name 
                  &lt;span class="pull-right"&gt;
                      &lt;span class="todo-tasklist-badge"&gt; 21 DAYS LEFT&lt;/span&gt;&amp;nbsp;
                      &lt;span class="todo-tasklist-badge btnConatctme"  data-toggle="modal" data-target="#myModal"&gt; Contact me&lt;/span&gt;&amp;nbsp;
                  &lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the website page link on which i am using it
  i am using angular js in it to 
  kindly help me on this it will be really appreciated </p>