angularjs: why ng-click doesn't seem to evaluate {{}}

Question

In a ng-repeat tag, I have a ng-click which contains a code to be evaluated as follows:

<div ng-repeat="stage in stages" class="selectable stage stage{{stage.stage}}" ng-click="changePage('plantStages/{{stage.id}}')">

Though in the safari inpector I see the code is evaluated as expected as follows…

<div ng-repeat="stage in stages" class="selectable stage stage6" ng-click="changePage('plantStages/floraison')">

…a click on the tag goes to unevaluated link as follows:

.corn.page.html#/plantStages/{{stage.id}}

Here is the changePage in the controller:

$scope.changePage = function(page) {

    var url = "kws.corn.page.html#/"+page;

    console.log("Change page "+page+" with url "+url);

    document.location.href = url;
};

Answer 1

Since ng-click is an Angular directive, you don't need to interpolate {{}} inside it:

ng-click="changePage('plantStages/' + stage.id)"

The above show work and is the preferred way.

It is true that the inspector shows the interpolated value, but this is too late in the Angular $digest cycle for the ng-click to work.