why interpolation works inside ng-show and not inside ng-click - angularjs

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 is failing in case of ng-click
angular.js:14525 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{myFunction()}}] starting at [{myFunction()}}].

Answer 1

Just use without the expression,
<button type="button" ng-click="myFunction()">click Me !!</button>

Answer 2

ng-show and ng-click are already an inbuild directive in angularjs. So, we no need to put it in curly braces for these expressions.
Without controller we doing the context in html itself. Use ng-init directive use to define as a variable you like 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 Fiddle

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 controller should be like,
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.isShow= true;
$scope.name = 'hallow world!';
}