title: Add role numbers in table dynamically using angular js
body: <p>I have created one simple table,for this table am getting data from controller.<br>Here I am trying to add <code>S.no</code> , But I don't know how to do it.<br>
  For now am just displaying <code>{{x.id}}</code> as <code>s.no</code> from backend,I dont want to display <code>{{x.id}}</code> as serial number but I need to pass it inside update method.<br>
  Can anyone teach me how to add <code>serial numbers</code> in angular?</p>
  
  <p>HTML:<br></p>
  
  <pre><code>&lt;body ng-app="intranet_App"&gt;
      &lt;div class="container"&gt;
              &lt;div class="table-responsive"&gt;
                  &lt;table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl"&gt;
                      &lt;thead class="colorBlue"&gt;
                          &lt;tr&gt;
                              &lt;th&gt;S.No&lt;/th&gt;
                              &lt;th&gt;Role Name&lt;/th&gt;
                              &lt;th&gt;Action&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id=""&gt;
                          &lt;tr ng-repeat="x in roleList | filter:searchText"&gt;
                              &lt;td&gt;{{x.Id}}&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;span ng-hide="editMode"&gt;{{x.name}}&lt;/span&gt;
                                  &lt;input type="text" ng-show="editMode" ng-model="x.name" /&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="editMode = true;edit(x.Id)" ng-hide="editMode"&gt;&lt;/i&gt;
                                  &lt;i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-hide="true" ng-show="editMode" ng-click="update(x.name,x.Id);editMode = false"&gt;&lt;/i&gt;
                                  &lt;i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="editMode = false" ng-hide="true" ng-show="editMode"&gt;&lt;/i&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>SCRIPT:<br></p>
  
  <pre><code>&lt;script&gt;
      var app=angular
                  .module("intranet_App", [])
                  .controller('myCtrl', function ($scope, $http) {
                      $scope.updateItem = [];
                      $scope.updatedList = function (val,id) {
                          $scope.updateItem.push(val,id);
                          $scope.json = angular.toJson(val,id);
                          if ($scope.json) {
                              $scope.json = { "name": val,"id":id }
                          }
                          console.log($scope.json)
                      }
                      $http.post("/Admin/getRolesList")
                      .then(function (response) {                     
                          $scope.roleList = response.data;
                      });
                      //$scope.edit=function(val){
                      //    $scope.editing = $scope.items.indexOf(val);
                      //}
                      $scope.update = function (val, id) {
                          $scope.updatedList(val,id);
                          var requestHeaders = {
                              "Content-type" : 'application/json'
                          }
                          var httpRequest={
                              method:'post',
                              url: '/Admin/RoleUpdate',
                              headers: requestHeaders
                          };
                          httpRequest.data = $scope.json;
                          $http(httpRequest).then(function (response) {
                              alert("success")
                          })
  
                      }
                      $scope.cancel = function (val) {
  
                      }
                  })
  &lt;/script&gt;
  </code></pre>