title: AngularJS ng-bind with a function
body: <p>I want to show a table format for the Attachments section. I have the lookup and results data. Both have a common column of <code>attachmentTypeId</code>. I want to show the attachment category description based on the id. In the <code>ng-bind</code> I tried an attempt, it's not worked. </p>
  
  <p>I am using a function in the <code>ng-bind</code>, hope the approach is wrong, expect an alternate for the approach.</p>
  
  <p>The <code>attachmentLookup</code> contains the <code>attachmentDesc</code>, <code>attachmentTypeId</code></p>
  
  <pre><code>  $scope.attachmentLookup = [{
      "attachmentDesc": "Category One",
      "attachmentTypeId": "1"
    }, {
      "attachmentDesc": "Category Two",
      "attachmentTypeId": "2"
    }, {
      "attachmentDesc": "Category Three",
      "attachmentTypeId": "3"
    }, {
      "attachmentDesc": "Category Four",
      "attachmentTypeId": "4"
    }, {
      "attachmentDesc": "Category Five",
      "attachmentTypeId": "5"
    }];
  </code></pre>
  
  <p>And the <code>attachmentDetails</code> data from the database as,</p>
  
  <pre><code>  $scope.attachmentDetails = [{
      "attachmentId": "001",
      "fileName": "File Name 001",
      "attachmentTypeId": "1"
    }, {
      "attachmentId": "003",
      "fileName": "File Name 003",
      "attachmentTypeId": "2"
    }, {
      "attachmentId": "005",
      "fileName": "File Name 005",
      "attachmentTypeId": "3"
    }, {
      "attachmentId": "007",
      "fileName": "File Name 007",
      "attachmentTypeId": "1"
    }, {
      "attachmentId": "009",
      "fileName": "File Name 009",
      "attachmentTypeId": "2"
    }, {
      "attachmentId": "011",
      "fileName": "File Name 011",
      "attachmentTypeId": "3"
    }];
  </code></pre>
  
  <p>The HTML code as,</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;File Name&lt;/th&gt;
        &lt;th&gt;|&lt;/th&gt;
        &lt;th&gt;Category&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="attachment in attachmentDetails"&gt;
        &lt;td&gt; &lt;span ng-bind="attachment.fileName"&gt;&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;|&lt;/td&gt;
        &lt;td&gt; &lt;span ng-bind="getCatgoryName(attachment.attachmentTypeId)"&gt;&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the <code>getCatgoryName</code> code from the controller is,</p>
  
  <pre><code>$scope.getCatgoryName = function (attachmentTypeId) {
      angular.forEach($scope.attachmentLookup, function (attachemnt) {
          if (attachemnt.attachmentTypeId === attachmentTypeId)
              return attachemnt.attachmentDesc;
      });
  };
  </code></pre>
  
  <p>Sample Plunker: <a href="http://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc">http://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc</a></p>