This is what is rendered in the HTML currently:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
<div ng-controller="my.custom.grideditorcontroller">
    <div class="list-group">
        <div class="list-group-item">
            <h4 class="list-group-item-heading">@Model.heading</h4>
            <ul class="ul-with-bullets">
                <li ng-if="@Model.punkt1 != ''">@Model.punkt1</li>
                <li ng-if="@Model.punkt2 != ''">@Model.punkt2</li>
                <li ng-if="@Model.punkt3 != ''">@Model.punkt3</li>
                <li ng-if="@Model.punkt4 != ''">@Model.punkt4</li>
                <li ng-if="@Model.punkt5 != ''">@Model.punkt5</li>
            </ul>
        </div>
    </div>
</div>
<br />

I'm not entirely sure how to do this condition. I tried testing for whether the value was null, empty or undefined but it still displays the li element.

My controller is very simple as it only contains the scope values for the various strings:

angular.module("umbraco").controller("my.custom.grideditorcontroller", function ($scope) {
    $scope.control.heading;
    $scope.control.punkt1 =  "";
    $scope.control.punkt2 =  ""; 
    $scope.control.punkt3 =  "";
    $scope.control.punkt4 =  "";
    $scope.control.punkt5 =  "";
});