AngularJS: display a block of html after button click

Question

I am trying to write a controller to handle the button click of the "New" button. The goal is for the lower block of code (starting <div ng-show="buttonClick">) to be initially hidden. When "New" button is clicked I would like the lower block of code to appear.

The problem I'm having is that the lower block of code is visible when I load the page. It is never hidden.

{% extends "base.html" %}


{% block content %}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <h2>Ratings</h2>
        <table class="table table-bordered">
          <thead>
          <tr>
            <th>Beer Name</th>
            <th>Beer Rating</th>
            <th>Notes</th>
            <th>Brewer</th>
          </tr>
          </thead>
          <tbody>
          {% for rating in ratings %}
            <tr>
              <td>{{ rating.beer_name }}</td>
              <td>{{ rating.score }}</td>
              <td>{{ rating.notes }}</td>
              <td>{{ rating.brewer }}</td>
              <td><a href="{% url 'rating-edit' rating.id  %}" class="btn btn-primary" value="{{ rating.id }}" name="edit">Edit</a></td>
              <td><a class="btn btn-primary" href="{% url 'rating-delete' rating.id  %}" value="{{ rating.id }}" name="delete" >Delete</a></td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
        <div ng-app="myApp" ng-controller="myCtrl">
        <a ng-model="buttonClick" ng-click="is_clicked()" class="btn btn-primary">New</a>
      </div>
    </div>
  </div>






<div ng-show="buttonClick" >
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <h2>Enter a new rating</h2>
        <form role="form" method="post">
          {% csrf_token %}
          <p>Beer Name: {{ form.beer_name }}</p>
          <p>Score: {{ form.score }}</p>
          <p>Notes: {{ form.notes }}</p>
          <p>Brewer: {{ form.brewer }}</p>
          <p><button type="submit" class="btn btn-primary">Submit</button></p>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope){
          $scope.buttonClick = false;
          $scope.is_clicked = function() {
            $scope.buttonClick=true;
            console.log($scope.buttonClick)
         }
        })
</script>
{% endblock %}

Answer 1

On this line

app.controller('myCtrl', function($scope)) {

Remove the last )

---

When your code will work, you will probably have a "blink" effect with your block. It will appear at the loading of the page, then it will disappear when Angular will start. If you have the "blink" effect, you will need to add ng-cloack on the block.

<div ng-show="buttonClick" ng-cloak>

Answer 2

I'd probably try it like this (untested):

<div ng-app="myApp" ng-controller="myCtrl">
       <div><a ng-click"buttonClick = !buttonClick" class="btn btn-primary">New</a></div>
       <script>
       var app = angular.module('myApp', []);
       app.controller('myCtrl', function($scope)) {
         $scope.buttonClick = false;
       }
       </script>