ng-click在jinja2模板中不起作用

Question

我正在尝试在角度ng-click函数getMenuById('{{restaurant.id}}', '{{restaurant.name}}')中传递jinja变量。但是页面呈现后ng-click无法正常工作。我试图在控制台上打印，但是没有用。下面是Jinja模板文件，在其中我在ng-click中传递jinja变量，并且还用方括号（[[]]）更改了角插值符号。

restaurant.html

{% for restaurant in restaurant_details %}
<div class="col-md-12" ng-if="serverSideRender">
    <article class="box">
        <figure class="animated fadeInRight" data-animation-type="fadeInRight" data-animation-delay="0.3" style="animation-duration: 1s; animation-delay: 0.3s; visibility: visible;">
            <a class="hover-effect" title="" href="/restaurant/{{restaurant.id}}">
            <img class="img-responsive" alt="" src="{{restaurant.images[0].image_url}}">
            </a>
        </figure>
        <div class="details">
            <div class="pull-right rating-container">
                <strong>{{ restaurant.rating }}
                <i class="fa fa-star" aria-hidden="true"></i>
                </strong>
            </div>
            <h2 class="box-title" style="font-size:24px">
                <strong>
                <a href="/restaurant/{{restaurant.id}}">{{ restaurant.name }}</a>
                </strong>
            </h2>
            <div>
                <small>
                <strong> {{restaurant.city}} </strong>
                </small>
            </div>
            <div class="restaurant-address">
                {{restaurant.address}}
            </div>
            <div class="restaurant-details">
                <span class="detail-title">Cuisines : </span>
                {% for association in restaurant.association %}
                <span>
                <strong>{{association.cuisines.cuisine}} {% if loop.index != restaurant.association|length
                %}
                <span>,</span>
                {% endif %}
                </strong>
                </span>
                {% endfor %}
            </div>
            <div class="restaurant-details">
                <span class="detail-title">Cost for two : </span>
                <span>
                <strong>₹ {{restaurant.price}}</strong>
                </span>
                <!-- <span ng-repeat="association in restaurant.association">
                    <strong>association.cuisines.cuisine]] <span ng-if="$index != restaurant.association.length - 1" >,</span></strong>
                    </span> -->
            </div>
            <div class="btn-group btn-group-justified">
                <a href="tel:{{restaurant.phone}}" class="btn btn-primary">
                <i class="fa fa-phone" aria-hidden="true"></i> call</a>
                <div class="btn btn-default" ng-click="getMenuById('{{restaurant.id}}', '{{restaurant.name}}')">
                    <i class="fa fa-file-text-o" aria-hidden="true"></i> view menu
                </div>
            </div>
        </div>
    </article>
</div>
{% endfor %}

restaurant.js

$scope.getMenubyId = function (restaurantId, restaurantName) {

    $scope.restaurantName = restaurantName;

    $http.get("/api/v1/restaurant/dish?restaurant_id=" + restaurantId)
      .then(function (res) {
        $scope.restaurantDish = res.data.result.dish;
      },
      function (err) {
        console.log(err);
      })
  }