AngularJS: passing array information along
<p>I have a table that lists several objects in an array using ng-repeat and I was wondering, if there is an easy way to let the user select one of these objects by clicking on the row and viewing them in a separate <code>&lt;div&gt;</code>.</p>

<p>Here's the table:</p>

<pre><code>&lt;table class="table"&gt;
    &lt;tbody class="table-hover"&gt;
    &lt;tr&gt;
        &lt;th scope="col"&gt;Name&lt;/th&gt;
        &lt;th scope="col"&gt;Type&lt;/th&gt;
        &lt;th scope="col"&gt;Approver&lt;/th&gt;
    &lt;/tr&gt;

    &lt;tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true"&gt;
        &lt;td&gt;{{ campaign.name }}&lt;/td&gt;
        &lt;td&gt;{{ campaign.type }}&lt;/td&gt;
        &lt;td&gt;{{ campaign.approver }}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Let's say the user clicked on the first row. He would now see a <code>&lt;div&gt;</code> that contains all the information in this row for that object.</p>

<pre><code>&lt;div&gt;
 {{campaigns[].name}}
 ...
&lt;/div&gt;
</code></pre>