Make phone number clickable in angular
<p>I am able to make the phone clickable in this way:</p>

<pre><code>&lt;a href="tel:+1-800-555-5555"&gt;Call 1-800-555-5555&lt;/a&gt;
</code></pre>

<p>However, I am to grabbing phone numbers from a database and I am not sure how to make the following that is grabbing the phone clickable:</p>

<pre><code>    &lt;strong&gt;Phone:&lt;/strong&gt; &lt;i class="glyphicon glyphicon-earphone"&gt;&lt;/i&gt; {{e.Phone | PhoneNumber}}
</code></pre>

<p><strong>UPDATE</strong></p>

<pre><code>&lt;div&gt;
&lt;nav class="hidden-xs visible-md visible-lg" ng-show="ShowResults"&gt;&lt;uib-pagination boundary-links="true" max-size="maxPageNumbersToShow" ng-model="currentPage" total-items="resultsCount"&gt; &lt;/uib-pagination&gt;&lt;/nav&gt;

&lt;nav class="visible-xs hidden-md hidden-lg" ng-show="ShowResults"&gt;&lt;uib-pager ng-model="currentPage" total-items="resultsCount"&gt; &lt;/uib-pager&gt;&lt;/nav&gt;

&lt;div class="container"&gt;
    &lt;div id="searchResults" ng-repeat="e in providers" ng-show="ShowResults"&gt;
        &lt;div class="row"&gt;
            &lt;hr /&gt;
            &lt;h4&gt;{{e.FullName}}&lt;/h4&gt;
        &lt;/div&gt;

        &lt;div class="row"&gt;
            &lt;div class="col-md-4 no-margin padding"&gt;&lt;strong&gt;Specialty: &lt;/strong&gt;{{e.Specialty}}&lt;br /&gt;
                &lt;span class="padding"&gt;&lt;strong&gt;Gender:&lt;/strong&gt; {{e.Gender}}&lt;/span&gt;&lt;br /&gt;
                &lt;strong&gt;Language(s):&lt;/strong&gt; {{e.Languages}}&lt;/div&gt;

            &lt;div class="col-md-4 no-margin"&gt;&lt;strong&gt;Clinic: &lt;/strong&gt; &lt;i class="glyphicon glyphicon-map-marker"&gt;&lt;/i&gt; &lt;a href="https://maps.google.com?saddr=Current+Location&amp;amp;daddr={{e.GoogleParams}}" target="_blank"&gt; {{e.Address1}}&lt;/a&gt;&lt;br /&gt;
                &lt;span class="shiftAdd padding"&gt;&lt;a href="https://maps.google.com?saddr=Current+Location&amp;amp;daddr={{e.GoogleParams}}" target="_blank"&gt;{{e.Address2}}&lt;/a&gt; &lt;/span&gt;&lt;br /&gt;
                &lt;strong&gt;Phone:&lt;/strong&gt; &lt;i class="glyphicon glyphicon-earphone"&gt;&lt;/i&gt; &lt;a href={{e.Phone}}&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&amp;nbsp;

&lt;nav class="visible-xs hidden-md hidden-lg" ng-show="ShowResults"&gt;
    &lt;hr /&gt;&lt;uib-pager ng-model="currentPage" total-items="resultsCount"&gt; &lt;/uib-pager&gt;&lt;/nav&gt;
</code></pre>

<p></p>

<p><strong>Update 2</strong></p>

<p>Here is what I did to determine whether phone number should be clickable:</p>

<pre><code>var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) &amp;&amp; 'ontouchstart' in document.documentElement);

    function initialize() {
        (function($) {
            $('.call').css("text-decoration", "none");
            $('.call').css("color", "black");
            $('.call').css("cursor", "default");
        })(jQuery);
    }
</code></pre>

<p>and what is added to the  tag:</p>

<pre><code>&lt;a href={{'tel:'+e.Phone}} onclick="return probablyPhone;"&gt;{{e.Phone | PhoneNumber}}&lt;/a&gt;
</code></pre>

<p>Not sure why it isnt working</p>

<p>Any help wold be appreciated, thanks</p>