I want to show dynamically the REST respont data after an AngularJS $http.get() call. The answer arrives fine The data bindings {{showOrderStateTrigger}} and {{orderDetails}} inserted just for test purposes after the call display true and the expected contents. But the ng-show and ng-hide does not recognize that their condition changed. I created ng-show and ng-hide cases just to test two approaches. Checking that the variable undefined or a boolean variable state. I tried the $scope.$apply() call, but it just made the things worse. The nested calls caused exceptions. Can anybody help me to solve this problem?
<script type="text/javascript">
var myApp = angular.module( "myApp", [] );
myApp.controller( "myController", function( $scope, $http )
{
$scope.showOrderDetailsTrigger = false;
$scope.showOrderDetails = function ( id )
{
$http.get( "/WebApplication1/orders/" + id + ".json" )
.then( function ( response ) {
$scope.orderDetails = response.data;
$scope.showOrderDetailsTrigger = true; } );
}
} )
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ul>
<c:forEach var="order" items="${orders}">
<li ng-click="showOrderDetails( ${order.id} )">${order.name}</li>
</c:forEach>
</ul>
<div>{{showOrderDetailsTrigger}}</div>
<div>{{orderDetails}}</div>
<div ng-show="{{showOrderDetailsTrigger}}">
<div>ID: {{orderDetails.id}}</div>
<div>Name: {{orderDetails.name}}</div>
</div>
<div ng-hide="{{orderDetails === undefined}}">
<div>ID: {{orderDetails.id}}</div>
<div>Name: {{orderDetails.name}}</div>
</div>
</body>
</html>
