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

so here's workflow-

i've got html file in div tag created on i've placed ng-repeat iterates , gives me list of items. on div tag, i've placed ng-click function. on clicking , item in div tag, modal-popup opened.

what need pass id of item ng-repeat , show data of id in modal-popup.

now i've written code upto here , things working fine, issue i'm facing if click on of items ng-repeat first item returned, , hence data id of first item being displayed in modal-popup.

how id of particular item clicked (and not first item) , pass controller?

here's 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;     // gives value in {{$index}}      $rootscope.elementname = document.getelementbyid('main').getelementsbytagname('h2')[0];     $rootscope.variablename = $scope.elementname.id;     // gives 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, found elements getting correct id.

this {{itenname}} code: (names coming correct)

h2#correctname.ng-binding 

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

div#0.ng-binding 

so wrong here? due asynchronous call? or due ng-binding (i.e id of item returned before ng-binding function completes)?

i'm stuck here couple of days now. appreciated. thanks.

you should not html data, instead should pass values function

ng-click="openmodal(data)" 

and on can data in funtion

$scope.openmodal = function (data) { 

and can data whatever 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>