Angularjs -> ng-click and ng-show to show a div

Question

I am trying just to display a div when user press a button, seems to be easy, but after spent a lot of time I am getting really crazy with this. My code is

My fiddle: http://jsfiddle.net/jmhostalet/4WK7R/1/

<div ng-app>     <div ng-controller="MyCtrl">         <div><button id="mybutton" ng-click="showAlert()">Click me</button></div>         <div>Value: {{myvalue}}</div>         <div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div>     </div> </div> 

and my controller

function MyCtrl($scope) {    $scope.myvalue = false;    $scope.showAlert = function(){     $scope.myvalue = true;     }; } 

Thank you!

Answer 1

Just get rid of the display: none; from your CSS. AngularJS is in control of showing/hiding that div.

If you want to hide it by default, just set the value of scope.myvalue to false initially - which you're already doing.