Why interpolation works inside ng-show and not inside ng-click

Question

//template

<div ng-controller="myController"> <input type="text" ng-model="name"> <p>{{name}}</p> <p>{{10+10}}</p> <button type="button" ng-click="{{myFunction()}}">click Me !!</button> <p ng-show="{{myFunction()}}">The name is {{ name | uppercase }}</p> </div> // Controller myApp.controller('myController', function ($scope) { $scope.name = 'Ranka'; $scope.myFunction = function(){ return true; }; }); 

Here it does not work in case of ng-click

angular.js: 14525 Error: [$ parse: syntax] Syntax error: token '{' invalid key in column 2 of expression [{{myFunction ()}}], starting with [{myFunction ()}}].

Answer 1

Just use without expression,

 <button type="button" ng-click="myFunction()">click Me !!</button> 

Answer 2

ng-show and ng-click are already the inbuild directive in angularjs. Thus, we do not need to put it in braces for these expressions.

Without a controller, we make context in the html itself. Use the ng-init directive to define the variable you need and override the variable in ng-click as you want

 <div ng-controller="MyCtrl" ng-init="showName = false;"> <input type="text" ng-model="name"> <p>{{name}}</p> <p>{{10+10}}</p> <button type="button" ng-click="showName = true">click Me !!</button> <p ng-show="showName">The name is {{ name | uppercase }}</p> </div> 

controller:

 var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.name = 'Ranka'; } 

Working script

Answer 3

try this simple way

  <button type="button" ng-click="{{ myFunction(); isShow = false}}">click Me !!</button> <p ng-show="{{isShow}}">The name is {{ name | uppercase }}</p> 

and the controller should be like

 var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.isShow= true; $scope.name = 'hallow world!'; }