title: AngularJS ng-show 2 way binding not working
body: <p>I am new to AngularJS and I have seen others asking similar questions, but the answers are not working for me. Rather than hijacking those questions, I thought I would open one for myself.</p>
  
  <p>I am creating a demo app -- it lists "sites" which can be added to or deleted. I am using the ng-show attribute to display the required html div while hiding the others.</p>
  
  <p>Here is the back-end javascript--</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var SiteMaintenanceModule = angular.module("SitesMaintenance", []);
      SiteMaintenanceModule.controller("siteCtrl", diveSiteCtrlfn);
  
      function diveSiteCtrlfn($scope) {
          // initializing the sites array
          $scope.sites = sites;
  
          //initializing the Divs array
          $scope.allowedDivs = ["listSiteDiv","addSiteDiv", "editSiteDiv","deleteSiteDiv"];
         
          // setting the first div as selected. This should show the div which lists the sites       
          $scope.selectedDiv = $scope.allowedDivs[0];
  
          // function to be called with the selected div is to be changed
          $scope.setSelectedDiv = function ($divSelectedByUser) {
              $scope.selectedDiv = $divSelectedByUser;
          }
       };</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" ng-app="SitesMaintenance"&gt;
  &lt;head&gt;
      &lt;title&gt;List of Dive Sites&lt;/title&gt;
      &lt;link rel="Stylesheet" href="./../zHelpers/bootstrap/css/bootstrap.css" /&gt;
      &lt;script src="./../zHelpers/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="./sites.js"&gt;&lt;/script&gt;
      &lt;script src="./SiteMaintenance.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="siteCtrl"&gt;
  
      &lt;!-- Display the list of sites  based on the selectedDiv variable--&gt;
      &lt;div id="SiteList" ng-show="{{selectedDiv == 'listSiteDiv'}}"&gt;
          &lt;h3&gt;List of Sites&lt;/h3&gt;
          &lt;ul ng-repeat="site in sites" ng-model="sites"&gt;
              &lt;li&gt;{{site.site}} in {{site.location}}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      
      &lt;!-- Display the add site Div  based on the selectedDiv variable--&gt;
      &lt;div id="AddSite" ng-show="{{selectedDiv == 'addSiteDiv'}}"&gt;
          &lt;h3&gt;Add New Site&lt;/h3&gt;
          &lt;div style="display:block; margin:10px"&gt;Site: &lt;input id="inputAddSiteName" /&gt;&lt;/div&gt;
          &lt;div style="display:block; margin:10px"&gt;Location: &lt;input id="inputAddSiteLocation" /&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;!-- Display the edit site Div based on the selectedDiv variable --&gt;
      &lt;div id="EditSites" ng-show="{{selectedDiv == 'editSiteDiv'}}" style="display:block;margin:20px"&gt;
          Site Name:&lt;input id="InputEditSiteName" /&gt;
          Site Location:&lt;input id="InputEditSiteLocation" /&gt;
      &lt;/div&gt;
      &lt;div id="controls"&gt;
          &lt;button id="AddNewSiteButton" ng-click="setSelectedDiv('addSiteDiv')"&gt;Add Site&lt;/button&gt;
          &lt;button id="DeleteSiteButton" ng-click="setSelectedDiv('deleteSiteDiv')"&gt;Delete Site&lt;/button&gt;
          &lt;button id="EditSiteButton" ng-click="setSelectedDiv('editSiteDiv')"&gt;Edit Site&lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can set the visible div to whatever I want at the start, by changing the index in the statement "$scope.selectedDiv = $scope.allowedDivs[0];" in the JavaScript.</p>
  
  <p>I change the value of $scope.selectedDiv when any of the buttons on the page are clicked, so as to change the visibility of the divs.</p>
  
  <p>However, the visibility of the divs doesn't change, no matter what the value of $scope.selectedDiv is. In fact, when debugging in chrome, I see that the attribute value of ng-show for each of my divs updates dynamically to "true" or "false" and expected, but the div is still displayed -- the initially invisible divs seems to have a class="ng-hide" attribute, which never changes. </p>
  
  <p>I have tried $scope.$apply() in the JavaScript but that gives errors. Any help would be greatly appreciated.</p>