title: Angular JS - dynamically add custom href link to value in table using ng-repeat based on a different value.
body: <p>I am creating a table using ng-repeat that display some tickets info. Currently in the column "Ticket No" I am adding href link (when user click on the "Ticket No" it will open new tab and the URL will take the ticket no as parameter.</p>
  
  <p>This a plunker I've created so it can show functionality as described above <a href="http://plnkr.co/edit/GB8WWz?p=preview" rel="nofollow">http://plnkr.co/edit/GB8WWz?p=preview</a></p>
  
  <p>The problem I have now is that the href link might vary and it depends on the account column value. So if my "account = foo" set the href link of the Ticket No to "<a href="http://myfoopage.foo/ticketid...etc" rel="nofollow">http://myfoopage.foo/ticketid...etc</a>". If my "account = boo" set the href link for the Ticket No to "<a href="http://myboopage.boo/ticketid...etc" rel="nofollow">http://myboopage.boo/ticketid...etc</a>".</p>
  
  <p>Any idea on how to approach that ?</p>
  
  <p><strong>scriptang.js</strong></p>
  
  <pre><code>angular.module('plunker', ['ui.bootstrap']);
  
      function ListCtrl($scope, $dialog) {
  
        $scope.items = [
          {ticket: '123', description: 'foo desc',account:'foo'},
          {ticket: '111', description: 'boo desc',account:'boo'},
          {ticket: '222', description: 'eco desc',account:'eco'}
        ];
  
  
      }
      // the dialog is injected in the specified controller
      function EditCtrl($scope, item, dialog){
  
        $scope.item = item;
  
        $scope.save = function() {
          dialog.close($scope.item);
        };
  
        $scope.close = function(){
          dialog.close(undefined);
        };
      }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"&gt;&lt;/script&gt;
      &lt;script src="scriptang.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div ng-controller="ListCtrl"&gt;
        &lt;table class="table table-bordered"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Ticket No&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Account&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr ng-repeat="item in items"&gt;
            &lt;td&gt;&lt;a href="http://mywebpage.foo/ticketid={{item.ticket}}" target="_blank"&gt;{{item.ticket}}&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;{{item.description}}&lt;/td&gt;
            &lt;td&gt;{{item.account}}&lt;/td&gt;
            &lt;td&gt;&lt;button class="btn btn-primary" ng-click="edit(item)"&gt;Edit&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>