ng-click showing all the hidden text field on ng-repeat rather than one in Angular

I started to work with Angular, it's pretty good to implement. I got stuck with a single issue at ng-click.

I am getting data dynamically and showing with ng-repeat, and I want to update the data at pencil click and for it I am using input text element, but when I click on pencil, it's opening all the text fields.

Here is my HTML code:

<

div ng-repeat="item in scroller.items track by $index">
       <div class="secHead text-center">
         <button class="common btnDarkGrey" data-ng-hide="hideCatButton">{{item.category_name}}</button>
         <input type="text" id="focus-{{$index}}" class="common btnDarkGrey editDashboardCategory" name="editCategory" value="" data-ng-model="item.category_name" data-ng-show="hideField">
     <span  data-ng-click="updateCategory(item.category_id,item.category_name,$index)"   class="chkOneDone" data-ng-show="hideOkButton">Done</span>
       <div class="pull-right">
           <a href="#" class="pen" data-ng-click="updatePen($index)"></a>
     </div>
    </div>
     </div> 

And here is my Angular code:

   $scope.updateCategory=function(category_id,updated_cat_name, $index){
        Category.updateCat($rootScope,$scope,$index,$http,$timeout,updated_cat_name,old_cat_name,category_id);
    };
$scope.updatePen=function($index){
        old_cat_name=$scope.scroller.items[$index].category_name
        $scope.hideField=true;
        $rootScope.hideOkButton=true;
        $rootScope.hideCatButton=true;
        
};

I created a Category Service to perform task like "update".

What can I try to solve this?

If you only want to hide/show one of the elements in the list you need to specify that in some fashion. Right now you have a three rootScope booleans: $scope.hideField=true; $rootScope.hideOkButton=true; $rootScope.hideCatButton=true; being set for the entire list, and you need to set a show properties on each individual in the list.

In your controller function you can do something like this before you expect a click:

//normal for loop so that you have the index
for(var i=0; i < $scope.scroller.items.length; i++){
  $scope.scroller.items[i].show = false;
}

Then you can do something like this to actually show the fields:

HTML:
  div ng-repeat="item in scroller.items track by $index">
   <div class="secHead text-center">
     <button class="common btnDarkGrey" ng-hide="!item.show">
       {{item.category_name}}</button>
     <input type="text" id="focus-{{$index}}" class="common btnDarkGrey editDashboardCategory" name="editCategory" value="" ng-model="item.category_name" ng-hide="!item.show">
 <span  data-ng-click="updateCategory(item.category_id,item.category_name,$index)"   class="chkOneDone" ng-show="item.show">Done</span>
   <div class="pull-right">
       <a href="#" class="pen" data-ng-click="updatePen($index)"></a>
 </div>
</div>
 </div> 

Controller:
  //controller declaration --
    $scope.updatePen = function(index){
      $scope.scroller.items[index].show = true;
    };

It's my understanding that you need all three properties to show once a click happens, so I condensed all the show properties into one single show property.

Your view only sees that hideField is true and performs that action for all of the items in your array. I hope this helps!