Neither ng-hide nor ng-show change the visibility of the element

Question

I began to use AngularJS, and I decided to make a list appear when I click on a button. My code is rather simple, but it doesn't work, and I don't understand why:

<div ng-app="myGame" ng-controller="gameCtrl">
    <h1>{{showLevels}}</h1>
    <p ng-show="showLevels">
        <ul>
            <li>Level 1</li>
            <li>Level 2</li>
            <li>Level 3</li>
        </ul>
    </p>
    <button ng-click="toggle()">Begin Game !</button>
</div>

And, in the JavaScript file:

var app = angular.module("myGame", []);
app.controller("gameCtrl", function ($scope) {
    $scope.showLevels = false;
    $scope.toggle = function () {
        $scope.showLevels = !$scope.showLevels;
    };
});

The levels are always shown, whether I use the ngShow or ngHide directive, despite the fact that $scope.showLevels is toggled, as I can see next to the title.

Where does this problem come from?

Answer 1

The paragraph element <p> can only accept phrasing content, and the unordered list element <ul> is not such a content.

Therefore, your browser translates your code into another one making more sense for it, by taking the <ul> out of the <p>. Your HTML is in fact:

<p ng-show="showLevels"></p>
<ul>
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
</ul>

That's why your list is always visible, no matter the content of the $scope.showLevels variable. The solution is to use another element, a document division element <div> for instance, or to remove this intermediate element completely:

<ul ng-show="showLevels">
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
</ul>