ng-hide is not working - angularjs

Question

I am new to angularjs.
When I click on "Click Me" the toggle method is called. The value of test changes from false to true, but ng-hide is not acknowledging the new value of test.
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td><span ng-hide="{{test}}">Testing</**strong text**td>
<td><span>hello</span></td>
</tr>
<tr>
<td style="cursor:pointer"><span ng-click="toggle()">Click Me</td>
<td><span>hello</span></td>
</tr>
</table>
</div>
script.js
var appX = angular.module('myApp', []);
appX.controller('myCtrl', function($scope){
$scope.test = false;
$scope.toggle = function(){
$scope.test = true;
console.log("toggle is working");
};
});

Answer 1

test is not an expression, so remove the curly braces,
<td><span ng-hide="test">Testing</**strong text**td>

Answer 2

Its a syntax error. You are combining both expression binding and directive binding. Below code should work.
Replace ng-hide="{{test}} with ng-hide-"test"

Answer 3

You don't need to tell that you are writing a angular code inside ng-hide as that is already angular directive, it will ditect test variable itself, so don't need to provide a braces over there to.
Simply try like : ng-hide="test"

Answer 4

The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute.
Since it accepts expression so no need of curly braces!
Change:
ng-hide="{{test}}"
to
ng-hide="test"
You need to use curly braces if the directive was expecting string instead of expression as an attribute value.
Fore more info refer Angular Docs.

Answer 5

Some code changes :
You forgot to close the </span>
<span ng-hide="test">Testing</span>
Remove **strong text** from the closing </td> element.
<td><span ng-hide="test">Testing</span></td>
Ass suggested by Sajeetharan, test is not an expression, so remove the curly braces.
<td><span ng-hide="test">Testing</span></td>
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.test = false;
$scope.toggle = function(){
$scope.test = true;
console.log("toggle is working");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr>
<td><span ng-hide="test">Testing</span></td>
<td><span>hello</span></td>
</tr>
<tr>
<td style="cursor:pointer"><span ng-click="toggle()">Click Me</span></td>
<td><span>hello</span></td>
</tr>
</table>
</div>