Why doesn't most simple case of Angular's ng-show work?

Question

My unbelievably simple code:

AAAA
<div ng-show="false">
     XXXXX
</div>
BBBBBBB

Output:

AAAA
XXXXX
BBBBBBB

Why does XXXXX show up in the output? I told ng-show to hide it.

Here is the JSFiddle: https://jsfiddle.net/v50oezss/1/

Answer 1

Your JSFiddle is not using Angular at all so there's no code doing anything with your DIV. You have to reference the framework in order to use it.

Add a <SCRIPT> reference to angular.js and then do something like this:

<div ng-app> <!-- this initializes angular and hooks the framework -->
  AAAA
  <div ng-show="false">
       XXXXX
  </div>
  BBBBBBB
</div>

I forked your JSFiddle so you can see it working.

Answer 2

In your fiddle, you haven't used AngularJs; to do this you must add it as External Resources. Furthermore you should used a ng-app like this:

HTML

<div ng-show="false">
     XXXXX
</div>

JS

var myApp = angular.module('myApp',[]);

I make a fiddle for more clearness.

http://jsfiddle.net/Lpj5onvq/1/

Regards

Answer 3

The other answers have correctly pointed out the problems. The most important problem was that your jsfiddle wasn't referencing the AngularJS library so your ng-show wasn't doing anything because plain HTML will ignore it.

I updated the jsfiddle so it now works.