title: Make phone number clickable in angular
body: <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>