title: How to set value of span within an Ng-repeat
body: <p>I am using an ng-repeat in order to list the contents of my data model where the content is being displayed correctly. However, as I am creating a contacts application, I am utilising a circle shape with text inside of it to display the first character from the first name and the first character from the last name, of each contact in the list - my code for this can be seen below: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="collection" ng-show="customers.length"&gt;
          &lt;li class="collection-item avatar" ng-click="showUserDetail(customer.id)" ng-repeat="customer in customers | orderBy: 'first_name' | filter: searchText" ng-class="{'active': customer.id == selectedUser.id}"&gt;
              &lt;span ng-init="setContactCircle(customer.first_name,customer.last_name)" id="contact-info" class="contact-circle"&gt;TC&lt;/span&gt;
              &lt;span class="title"&gt;{{customer.first_name}}  {{customer.last_name}}&lt;/span&gt;
              &lt;p&gt;{{customer.email}}
                  &lt;br&gt; {{customer.mobile_number}}
              &lt;/p&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.setContactCircle = function(first_name,last_name) {  
      var strFirst = first_name.charAt(0);
      var strLast = last_name.charAt(0);
      var strName = strFirst + strLast;
  
      /* span = document.getElementById("contact-info");
      txt = document.createTextNode(strName);
      span.innerHTML = txt.textContent; */
  
      //document.getElementById("contact-info").innerHTML = strName;
  
      $("#contact-info").text(strName);
      console.log(strName);
  }
  </code></pre>
  
  <p>The ng-init appears to be working as the first character from the first name and the first character from the last name are being outputted to the console in 'console.log(strName);' but the text is not being set on the span class.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Thank you all for your help where the below has resolved the issue. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span ng-bind="setContactCircle(customer)" id="contact-info" class="contact-circle"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.setContactCircle = function(customer) {  
      var strFirst = customer.first_name.charAt(0);
      var strLast = customer.last_name.charAt(0);
      return strFirst + strLast;
  }
  </code></pre>