Angular JS - dynamically add href links to icons using ng-repeat

Question

I'm trying to use angular to create a table of different videos that are organized by topic, date, presenter and also are tagged.

I've used ng-repeat to repeat over my array of objects to produce a table.

However, how can I dynamically change the href link for the play button?

In the jsfiddle below, I've added a static row of what each should look like. the first column has a fontawesome icon that is linked to a video. How can I edit the function so that the href link is updated in the ng-repeat?

http://jsfiddle.net/jheimpel/f139z9zx/3/

function playerCtrl($scope) {

  $scope.topics = [
   {
    "play": "play",
    "topic": "topic 1",
    "date": "date 1",
    "presenter": "presenter 1",
    "tags": "tag"
  },
    {
    "play": "play",
    "topic": "topic 2",
    "date": "date 2",
    "presenter": "presenter 2",
    "tags": "tag"
  },     

  ];

}

Answer 1

You can put an <a> tag with dynamic href inside of the ng-repeat, it works just as you'd expect - though using ng-href is better, so your links dont break before the data bindings are ready.

I've updated your fiddle: here

So that the ng-repeat starts with:

    <tr ng-repeat="topic in topics">
        <td><a ng-href="#/{{topic.url}}"><i class="fa fa-play"></i></a></td>

(and I added that extra url field to your test data)

Answer 2

If I understood you correctly, you just need to use ng-href:

<td><a ng-href="{{linkVar}}"><i class="fa fa-play"></i></a></td>

and ng-click on row:

<tr ng-repeat="topic in topics" ng-click="changeLink($index)">

http://jsfiddle.net/n8s7ns7h/