Pushing Object to array does not reflect at ng-repeat - angularjs

Question

I am updating an array by pushing the Json object returned by MVC controller to an array in Angular JS controller.
Following is the code sports-controller.js
portsApp.controller("SportsController", ["$scope","$http",function ($scope,$http) {
$scope.data = { id: "rehmat" };
$scope.sports = [];
$scope.selectedSport ={};
$scope.sportsObj = {};
$scope.SportsModel = {};
$scope.sport = {};
$scope.remoteUrlRequestFn = function (str) {
return { term: str };
};
function genericSuccess(res) {
return res.data; // yes, really.
}
$scope.selectedSport = function (selected) {
$scope.sport =
{
title: selected.originalObject.name,
parent_id: selected.originalObject.parent,
sports_id: selected.originalObject.sports_id,
user_id: selected.originalObject.uid
}
$http.post("/usersports/post_sport", $scope.sport).then(function (data, status, headers, config) {
$scope.sports.push(genericSuccess(data).sport);
console.log($scope.sports);
});
}
$scope.UpdateSport = function (id) {
if(id > 0)
{
$http.post("/usersports/update_sports", { user_sport_id: id }).then(function (data,status,headers,config){
if(data.Success)
{
alert(data.Message)
}else
{
alert(data.Message)
}
})
}
}
}
])
VIEW :
<div class="container sports-c" ng-app="SportsApp" >
<!--ADD SPORTS TEXT-->
<div class="col-lg-12" ng-controller="SportsController">
{{sports}}
<div class="add-sports-text ">
<h1 style="text-align:center;" class="animated jello">ADD SPORTS</h1>
<hr style="width:30%">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
</div>
<div class="form-group" style="text-align:center;">
<label for="search" style="text-align:center;"> SEARCH</label>
<angucomplete-alt id="sports_input_box"
placeholder="Search Sports"
pause="400"
selected-object="selectedSport"
remote-url="/ajax/getSports"
remote-url-request-formatter="remoteUrlRequestFn"
remote-url-data-field="items"
title-field="name"
minlength="2"
input-class="form-control input-custom" />
#*<input type="Search" placeholder="SEARCH" class="form-control input-custom" id="sports_input_box">*#
</div>
</div>
<div class="col-lg-12">
<div class="table-responsive">
{{sports.length}}
<table class="table table-bordered " id="sports-table">
<tr>
<td>ID</td>
<td>SPORTS NAME</td>
<td>SELECT SKILL LEVEL</td>
<td>ACTION</td>
</tr>
<tbody>
<tr ng-repeat="item in sports">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td style="position: relative;top: 10px;">
<select class="example" name="" ng-change="updatePlayerSkill(item.id)" ng-bind="SportsModel.skill_level">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td class="icons-tab">
<i class="fa fa-check-square-o" aria-hidden="true" ng-click="UpdateSport(item.id)"></i>
<i class="fa fa-trash-o" aria-hidden="true" ng-click="RemoveSport(item.id)"></i>
</td>
</tr>
<tr ng-show="sports.length === 0"><td colspan="5">No Sports Added</td></tr>
</tbody>
</table>
</div>
</div>
</div>
What is a possible solution for this since I am updating the array by pushing the elements and its not reflecting?
I am using Angular Js 1.6, any help would be really appreciated.
please check the image

Answer 1

Try to surround the code that is pushing the element in the array with a $timeout (Don't forget to inject the $timeout in your controller). This will trigger the diggest cycle and update the bindings, as can be seen here.
`
$http.post("/usersports/post_sport", $scope.sport).then(function (data, status, headers, config) {
$timeout(function(){
$scope.sports.push(genericSuccess(data).sport);
console.log($scope.sports);
});
});
`

Answer 2

The error is caused because from what I see in angucomplete-alt library, the selected parameter can be null. You need to handle that:
$scope.countrySelected = function(selected) {
if (selected) {
window.alert('You have selected ' + selected.title);
} else {
console.log('cleared');
}
};
Regarding your primary question. Using asynchronus requests, it could happen that you go out of Angular $digest cycle. Try to wrap array.push with $scope.applyAsync() to refresh the view.