AngularJS Interpolation Error

Question

I am displaying the properties of a room as part of a room management application I am working on, this is the output:

Answer 1

The problem is that

$scope.currentRuimte = Ruimte.get({
    ruimteNaam: $routeParams.ruimteNaam
});

Is an asynchronous operation. $scope.currentRuimte is going to be a blank object when this call returns, and some time later, when the data is available, it will be filled in with the HTTP response.

This means that the first time your view is rendered, $scope.currentRuimte is going to be {}, and therefore $scope.currentRuimte.beamer is going to be undefined, so this line:

var beamer = $scope.currentRuimte.beamer;
if(beamer.aanwezig == 'Ja'){ /* <-- undefined.aanwezig ! */
}

is going to raise an exception. You can solve this by making sure that beamer is truthy first:

$scope.getBeamerString = function () {
    var beamer = $scope.currentRuimte.beamer;
    if(beamer && beamer.aanwezig == 'Ja'){
        return beamer.typeBeamer + ' (lamp: ' + beamer.datumLamp + ')';
    }else{
        return '-';
    }
}