Triple-click selects the next element with Angular Bootstrap modal

Issue

I have an Angular application using (UI) Bootstrap and I'm displaying a URL in a modal-body inside well and code elements. The modal-footer just has a Close button. Now if one triple-clicks the URL to copy it, the Close button text in the footer is also selected and one can not paste it to another tab as usual.

Fiddle here

<div class="modal-body">
    <div class="well">
        <code>http://www.google.com/</code>
    </div>
</div>
<div class="modal-footer">
    <button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>

I have searched a lot but cannot come up with a solution (have tried CSS's user-select, wrapping it in different elements, which do not seem to work).

Solution

Replace <button> by <input> to disable text selection:

<input type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal" value="Close"></input>

Updated Fiddle

Answered By - MrNobody007