Angular JS : how i can change content using Json data - angularjs

Question

I receive a json object via an api rest. I want to change the content of my page when the number of places recieved from json = 0.
i have this JSON format :
{
date:"2016-06-30T01:01:01"
id:5
places:[]
}
{
date:"2016-06-30T01:01:01"
id:5
places:
{place: 57}
{
date:"2016-06-30T01:01:01"
id:5
places:
{place: 57}
{place: 58}
{place: 59}
{place: 60}
}
my controller Angular :
$scope.LoadAllSpots = function () {
SpotConfigurationService.GetListSpots(function (datas) {
$scope.CAMs = datas;
console.log(datas);
angular.forEach($scope.CAMs, function (value, Key) {
if (value.places.lenght == 0) {
$scope.ActiveAjoutPlace = false;
}
});
}
my html page :
if place recievied from json = 0 i display the first row else i display the other: have you an idea please
<div class="row " ng-show="ActiveAjoutPlace">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-if="#ViewBag.IsLeft">
<div class="ImgCamera col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
</div>
</div>
</div>
<div class="container">
<div class="row " ng-show="!ActiveAjoutPlace">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ListPlace ">
<div class="PlaceNumber">
<div class="input-group input-group-left SelectStyle">
<select class="form-control">
<option>place 124</option>
</select>
</div>
</div>
<div class="row RowPicto">
<div class="SvgPicto col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img src="#Url.Content(" ~/Resources/Common/pic_handicap.svg ")" />
</div>
<div class="SvgPicto col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img src="#Url.Content(" ~/Resources/Common/pic_Elec_car.svg ")" />
</div>
<div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">
<img src="#Url.Content(" ~/Resources/Common/pic_moto.svg ")" />
</div>
</div>
<div class="row RowPicto">
<div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">
<img src="#Url.Content(" ~/Resources/Common/car.svg ")" />
</div>
<div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">
<img src="#Url.Content(" ~/Resources/Common/pic_famille.svg ")" />
</div>
<div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">
<img src="#Url.Content(" ~/Resources/Common/pic_GPL_car.svg ")" />
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">
<button value="ToggleContent"click="toggleContent()">Supprimer</button>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-if="!#ViewBag.IsLeft">
<div class="ImgCamera col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
</div>
</div>
</div>

Answer 1

First of all it's not json because in json format name property and property should be string.
And it should contain , after }
So if I understand correctly you display some data gathered from rest API call and you assign it to $scope.CAMs and if I understand you want to display two different divs if $scope.CAMs is empty or not, right?
You can just use ng-if directive like so:
<div ng-if="CAMs.length > 0"> There is data </div>
<div ng-if="CAMs.length == 0"> CAMs is empty </div>
However $scope.CAMs need to be valid object or JSON.
Same with children:
<div ng-if="CAMs.places.length > 0"> There is data </div>
<div ng-if="CAMs.places.length == 0"> CAMs is empty </div>