Rohit Rohit - 1 month ago 12
AngularJS Question

Angular JS expression not evaluating

I have written a simple Angular JS code. I'm a beginner. However, one of my expressions is not getting evaluated. Need help. Please check the code below -

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

myAppModule.controller('myController', function($scope){
// Hide colors by default
$scope.isHidden = true;

// a function, placed into the scope, which
// can toggle the value of the isHidden variable
$scope.showHideColors = function () {
$scope.isHidden = !$scope.isHidden;

<script src=""></script>
<!DOCTYPE html>
<html ng-app="myAppModule">
<title>Angular JS</title>
<script src="js/angular.min.js"></script>
<script src="js/myAppModule.js"></script>
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
div {
margin: 20px;
padding: 20px;
font-size: 16px;
#red {
background-color: red;
#green {
background-color: green;
#blue {
background-color: blue;
#purple {
background-color: purple;
#gray {
background-color: gray;
#olive {
background-color: olive;

<body ng-controller="myController">
<h2>AngularJS Socks</h2>
<p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p>

<button ng-click="showHideColors()" type="button">
{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>

The expression -
{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
is not getting evaluated but displaying as is on the button. No clue as to what i missed. Thanks in advance.

Win Win

The code is missing closing bracket. You can see the working demo here -

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

app.controller('myController', function($scope) {

  $scope.isHidden = true;

  // a function, placed into the scope, which
  // can toggle the value of the isHidden variable
  $scope.showHideColors = function() {
    $scope.isHidden = !$scope.isHidden;
  } // <- This is missing.