AngularJS: How to display element by default and toggle it when a button is pressed

Question

I need to toggle an element that needs to be initially visible. In my case the toggle works fine but the element (menu class) is initially hidden...

JSFIDDLE

Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
  <div class="menu" ng-show="collapsed">
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </div>
</div>

Answer 1

If not initialized, the default value of collapsed is false. You can initialize scope.collapsed = true in your controller or directive instead of using ng-init because ng-init is costly.

Answer 2

instead of

<div class="menu" ng-show="collapsed">

use this line:

<div class="menu" ng-show="!collapsed">

fiddle

Answer 3

You can use ng-init="expression" or set in a controller, but I prefer ng-init, since it propagates.