Getting ID of the first item only on using ng-repeat

Question

So here's my workflow-

I've got an HTML file in which a div tag is created on which I've placed ng-repeat which iterates and gives me a list of items. On this div tag, I've placed an ng-click function. On clicking and item in the div tag, a modal-popup is opened.

What I need is to pass the id of the item from ng-repeat and show the data of this id in the modal-popup.

Now I've written the code upto here and all things are working fine, but the issue that I'm facing is if I click on any of the items from ng-repeat the first item is only returned, and hence data for the id of the first item is only being displayed in the modal-popup.

How could I get the id of the particular item clicked (and not the first item) and pass it to the controller?

Here's my working code -

main HTML:

<div id="main">
<div ng-repeat="data in JsonData" ng-click="openModal()">               
    <div id="widget">
        <div id="{{$index}}">
            <div>
                <h2 class="font-bold no-margins" id="{{data.itemName}}">
                {{data.itemName}}
                </h2>
            </div>
            <div>
                // other code
            </div>
        </div>
    </div>
</div>
</div>

main controller.js:

$scope.openModal = function () {
    $rootScope.elementid = document.getElementById('main').getElementsByTagName('div')[2];
    $rootScope.variableId = $scope.elementid.id;     // This gives the value in {{$index}}

    $rootScope.elementname = document.getElementById('main').getElementsByTagName('h2')[0];
    $rootScope.variablename = $scope.elementname.id;     // This gives the value in {{data.itemName}}

    $uibModal.open({
                templateUrl: 'url/to/modal/popup.html',
                controller: 'PopUpController',
                scope : $scope,
                windowClass: "animated fadeIn",
                backdrop:'static'
    });
};

On doing inspect element, I found that the elements are getting their correct id.

This is for the {{itenName}} code: (names are coming correct)

h2#CorrectName.ng-binding

and this is for the {{$index}} code: (here, id is incrementing for the items of ng-repeat)

div#0.ng-binding

So where am I wrong here? Is it due to any asynchronous call? Or is it due to ng-binding (i.e id of the item is returned before the ng-binding function completes)?

I'm really stuck here for a couple of days now. Any help would be much appreciated. Thanks.

Answer 1

You should not get the HTML data, instead you should pass the values to your function

ng-click="openModal(data)"

and from that on you can get the data in your funtion

$scope.openModal = function (data) {

and now you can do with that data whatever you want

console.log(data.itemName)

angular.module('test', []).controller('test', function($scope) {
  // Test data
  $scope.JsonData = [{itemName: "Test"}, {itemName: "OtherTest"}];
  
  $scope.openModal = function(data) {
    // handling data
    console.log(data);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test" ng-controller="test">
<div ng-repeat="data in JsonData" ng-click="openModal(data)">               
    <div id="widget">
        <div id="{{$index}}">
            <div>
                <h2 class="font-bold no-margins" id="{{data.itemName}}">
                {{data.itemName}}
                </h2>
            </div>
        </div>
    </div>
</div>
 </div>