title: In angularjs dynamic button creation is correct but validation is not correct
body: <p>in my code  buttons are  created correctly but after typing the first row,click Add fields.the close button is disabled in first row.but i want only disable in current typing row.other close buttons are enable.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="okay.js"&gt;
   &lt;/script&gt;
   &lt;/head&gt;
  &lt;body ng-app="testApp"&gt;
  &lt;div ng-controller="MainCtrl"&gt;
  &lt;form name="frm" class="form-inline" novalidate&gt;
  &lt;div class="form-group"&gt;
      &lt;input type="string"  name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name"     ng-pattern="/^[a-zA-Z]*$/" required&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt; 
  &lt;input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required&gt;
  &lt;/div&gt; &lt;br&gt;
  &lt;fieldset  data-ng-repeat="choice in choices track by $index "&gt;
      &lt;br&gt;
      &lt;div class="form-group"&gt; &lt;input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required&gt; 
  
  
      &lt;div class="form-group"&gt;      
             &lt;input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required&gt;
  
    &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
         &lt;input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/"placeholder="Category Item View Count" required&gt;
  &lt;p class="help-block" ng-show="frm.item_count.$error.pattern"&gt;numbers only allowed&lt;/p&gt;  
      &lt;select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries"&gt;
        &lt;/div&gt;
  
      &lt;div class="form-group"&gt; 
      &lt;option value=''&gt;Choose&lt;/option&gt;
          &lt;/select&gt;City:
          &lt;select id="state" ng-disabled="!choice.states" name="city" ng-model="one"&gt;
              &lt;option value=""&gt;Choose&lt;/option&gt;
              &lt;option ng-repeat="state in choice.states" value="{{state.id}}"&gt;{{state.city}}&lt;/option&gt;
          &lt;/select&gt;
       &lt;/div&gt;
          &lt;button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid"&gt;close&lt;/button&gt;
     &lt;/fieldset&gt;
     &lt;br&gt;
     &lt;button class="addfields btn btn-success" ng-click="addNewChoice()"  ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid"&gt;Add fields&lt;/button&gt;
       &lt;button class="addfields btn btn-success"   ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid " &gt;Save&lt;/button&gt;
  
   &lt;span class="help-block" style="color:red"ng-show="frm.cat_desc.$error.pattern" style:"color:red"&gt;ERROR:&lt;BR/&gt;text only allowed&lt;/span &gt;
    &lt;span class="help-block" style="color:red"ng-show="frm.item_desc.$error.pattern"&gt;ERROR:&lt;BR/&gt;text only allowed&lt;/span &gt;  
    &lt;span class="help-block" style="color:red"ng-show="frm.cat_name.$error.pattern"&gt;ERROR:&lt;BR/&gt;text only allowed&lt;/span &gt;
       &lt;span class="help-block"style="color:red" ng-show="frm.item_name.$error.pattern"&gt;ERROR:&lt;BR/&gt;text only allowed&lt;/span &gt; &lt;/div&gt;
     &lt;div id="choicesDisplay"&gt;
        {{ newItemNo }}
     &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>okay. js (angular File)</p>
  
  <pre><code>var app=angular.module('testApp', []);
    app.controller('MainCtrl', function($scope) {
    $scope.choices = [{id: 'choice1'}];
  
  
  
  
  
    $scope.addNewChoice = function() {
      var newItemNo = $scope.choices.length+1;
      $scope.choices.push({'id':'choice'+newItemNo});
  
  };
  
    $scope.removeChoice = function() {
      $scope.choices.splice(this.$index,1);
    };
  
  
       $scope.countries = {
           'Andhra': [{
               'id': '01',
               'city': "Guntur"
           }, {
               'id': '02',
               'city': "Hyderabad"
           }],
               'Tamilnadu': [{
               'id': '03',
               'city': "CBE"
           }, {
               'id': '04',
               'dep': "Trichy"
           }]
       };
  });
  </code></pre>