 <p>Usually the best way to get data from a server to the front end is as a JSON string/object then we can easily manipulate that just like you're doing already.</p> <p>I think you're pretty much there you're just missing one part.</p> <p>In this below example i'm listing the same users in a table and menu and on click of the table row the selected user in the drop down is defaulted.</p> <p>For example with this sample table data.</p> <p>JS:</p> <pre><code>var users = [{ ID: 0, LNAME: "First", FNAME: "Senior" }, { ID: 1, LNAME: "Second", FNAME: "Sir" }, { ID: 2, LNAME: "Third", FNAME: "Chap" }, { ID: 3, LNAME: "Fourth", FNAME: "Mr" }]; mag.module('userName', { view: function(state) { state.tr = state.option = users.map(function(user) { return { _selected: user.ID == state.index ? true : null, _text: user.FNAME + ' ' + user.LNAME, _value: user.ID } }); state.$tr = { _onclick: function(e, i) { state.index = i; state.span = users[i].FNAME + users[i].LNAME } } } }); </code></pre> <p>HTML:</p> <pre><code>&lt;div id="userName"&gt; &lt;table&gt; &lt;tr&gt;&lt;/tr&gt; &lt;/table&gt; &lt;hr/&gt; &lt;label for="fullName"&gt;Select User: &lt;span&gt;&lt;/span&gt;&lt;/label&gt; &lt;select class="form-control" name="userName"&gt; &lt;option&gt;&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>Here is the full working example: <a href="http://jsbin.com/bokiqebezo/1/edit?html,js,output" rel="nofollow">http://jsbin.com/bokiqebezo/1/edit?html,js,output</a></p> <p>Hope this helps!</p>