Displaying json data in input field with AngularJS

Question

I would to display JSON data in html input fields using AngularJS. Here's the code.

I have two HTML files. First HTML file contains a table which displays the json data. When you click in a row then it opens a modal window with a form (second HTML file).

Here's the Code: JSON data

var examples = [
   { 'id': '1', 'fname': 'john' },
   { 'id': '2', 'fname': 'bonnie' },
   { 'id': '3', 'fname': 'joey' }
];

Here's the Code: (First HTML file)

...
<tr ng-repeat="item in examples" ng-click="open(this.item)">
   <td>{{ item.id }}</td>
   <td>{{ item.fname }}</td>
</tr>
...

Second HTML file:

...
    <input type="text" class="form-control" placeholder="ID" id="firstVal" value="">
...

My Controller:

...
$scope.open = function (item) {
   console.log(item.id);
   $("#firstVal").val(item.id);
};
...

It doesn't insert the value "id" in the input field. How can I do this with AngularJS or jQuery?? In the console I'm getting the value of id.

Answer 1

<input type="text" class="form-control" placeholder="ID" ng-model="selectedId">

and

$scope.open = function (item) {
   console.log(item.id);
   $scope.selectedId = item.Id
};

Answer 2

Also, make sure your second HTML is using the same controller (shared scope). Moreover, it is always advised to use a dot notation when accessing scope items. In this case you would suggest the same as entre but with a minor modification:

$scope.open = function (item) {
   $scope.selectedObj.id = item.Id
};

And in the form HTML (once you have the same controller working there):

<input type="text" class="form-control" placeholder="ID" ng-model="selectedObj.id">

UPDATE Here's a working fiddle for you: https://jsfiddle.net/aqs9vLd8/1/ Note how $scope.selectedObj needs to be initialized first as an object (empty).

Let me know if it works for you