i am calling ajax when button click event ng-click but ng-repeat does not load

Question

i was call ajax button click and ng-repeat does not load data one click but when i clicked two times its load, i don't know why please check code

 $scope.myData.doClick = function (item,event) {                             
                          var startdate = document.getElementById('txtstart').value;
                          var enddate = document.getElementById('txtend').value;
                          $.ajax({
                              type: "POST",
                              url: "studentattendance.aspx/GetEmployees",
                              data: JSON.stringify({ title: startdate, songname: enddate}),
                              contentType: "application/json; charset=utf-8",
                              dataType: "json",
                              success: function (msg) {
                                  $scope.studentattendance = {};
                                      $scope.studentattendance = JSON.parse(msg.d);
                                  console.log($scope.studentattendance);

                              },
                              error: function (msg) {
                                  alert(msg.d);
                              }
                          });
                      }

//HTML

<tr ng-repeat="info in studentattendance">
                                            <td>{{info.student_name}}</td>
                                            <td>{{info.father_name}}</td>
                                            <td>{{info.class_name}}</td>
                                            <td>{{info.attendancedate | date:'dd-MM-yyyy'}}</td>
                                            <td ng-if="info.attendanceType == 'Present'"> <button type="button" class="btn btn-success btn-circle"><i class="fa fa-check"></i></td>
                                             <td ng-if="info.attendanceType == 'Absent'"> <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-times"></i></td>
                                             <td ng-if="info.attendanceType == 'Leave'"> <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-list"></i></td>


                                        </tr>

Click here

Answer 1

$.ajax is part of jQuery , but not of Angular . So when it returns from your ajax request, angular context is not aware of your data changing. When you click again, a digest cycle is forced to run, and in that very moment new data is detected in your array - that's why you see it rendered again.

You have two options.

1- using $scope.$apply() in your success callback.

Like

success: function (msg) {
             $scope.studentattendance = {};
              $scope.studentattendance = JSON.parse(msg.d);
              console.log($scope.studentattendance);
             $scope.$apply();
}

2- using $http service from angular instead - it is a built in service which calls $scope.$apply() internally for you

Like

$http({
      method: "POST",
      url: "studentattendance.aspx/GetEmployees",
      dataType: 'json'
      data: JSON.stringify({ title: startdate, songname: enddate}),
      headers: { "Content-Type": "application/json; charset=utf-8" },
  }).then(function (msg) {
      $scope.studentattendance = {};
      $scope.studentattendance = JSON.parse(msg.d);
      console.log($scope.studentattendance);
      }, function (msg) {
     alert(msg.d);
  });

I would go for option two

Answer 2

The real issue is that you're using jQuery's ajax instead of Angular's $http . When you don't do things like that through Angular, you're working outside of Angular's scope and it doesn't know about changes.

You can try:

$scope.$apply(function() {
  $scope.studentattendance = JSON.parse(msg.d);
});