Giving unique id to each item in `ng-repeat` for DOM manipulations

Question

.div(ng-repeat='item in items') 
   button(id='ID{{$index}}') No Hi

button(id='anotherID1') Hi

inside relevant Angular Directive

$('#ID1').on('click', function() {alert('hi');});  // does not work 

$('#anotherID1').on('click', function() {alert('hi');}); // works

I am performing DOM manipulations for which i need unique ID for ng-repeat elements. Please also suggest if DOM manipulation can be performed in any other way too.

Edit: @tymeJV:-

 style.
  .ques {
    height: 50px;
    overflow:hidden;
  }



<div ng-repeat='item in items'>
    <div class='ques'> {{item.ques}}
    </div>
    <button id='ID{{$index}}'> No Hi </button>
</div>

// Directive Code:- to increase height of <div class = 'ques'>

Answer 1

First of all, if you are using Angular, it is recommended that you stick with standard Angular directives for listeners rather than reverting to jQuery. So instead of jQuery's on, use the ng-click attribute on HTML events you want Angular to bind a listener to.

For example:

HTML:

<button ng-click="doStuff()">
</button>

Controller:

$scope.doStuff = function () {
    //perform action
};

For storing a unique ID with each element created by ng-repeat, how about adding a parameter to the doStuff call with the ID: ng-click="doStuff(item.ID)" and access it in the $scope.doStuff method.