title: Setting ng-show value from controller but my code is not working
body: <p>New to angular js. I read many solution regarding my code. The problem, I am facing is that, I have two tables. By default one table is hide and one one is visible. I want to show hidden table when I click on button and want to hide second table. When I click on button the ng-show value updated but table doesn't hide and required table doesn't show up. Thanks in advance for your help. </p>
  
  <p>Code on page load : controller.js</p>
  
  <pre><code>var refresh = function(){
              /** Driver Profile Data */
              $scope.userProfile_show  = true;
              $scope.editUserProfile_show  = false;
              $http.get('/user/profile/?user_id='+$location.search()['driverID'], {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
              }).success(function (response) {
                  $scope.userProfile = response.data;
              });
  
              });
          }
  
          refresh();
  </code></pre>
  
  <p>HTML Code: </p>
  
  <pre><code>&lt;table class="table" id = "editUserProfile" ng-show = "{{editUserProfile_show}}"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Property&lt;/td&gt;
                          &lt;td&gt;Value&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  &lt;table&gt;
  
  &lt;table class="table" id = "userProfile" ng-show= "{{userProfile_show}}"&gt;
                  &lt;colgroup&gt;
                      &lt;col class="col-md-5"&gt;
                      &lt;col class="col-md-7"&gt;
                  &lt;/colgroup&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;User Profile&lt;/th&gt;
                          &lt;th style="text-align: -webkit-right"&gt;&lt;button class="btn-primary btn" id = "editUserProfile_button" ng-click = "editUserProfile()"&gt;Edit User Profile&lt;/button&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>On page load both table are working properly, But when click on button "Edit User Profile" then values of ng-show are updated but table doesn't switch their visibility. </p>
  
  <p>Controller code for editUserProfile()</p>
  
  <pre><code>$scope.editUserProfile = function(){
              $scope.editUserProfile_show  = true;
              $scope.userProfile_show  = false;
              $http.get('/user/profile/?user_id=559f6d43cd9e9cfd07422baa', {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
              }).success(function (response) {
                  console.log(response.data);
                  $scope.userProfile = response.data;
              });
          };
  </code></pre>
  
  <p>HTML View after clicking function: </p>
  
  <pre><code>&lt;table class="table ng-hide" id="editUserProfile" ng-show="true"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Property&lt;/td&gt;
                          &lt;td&gt;Value&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;table class="table" id="userProfile" ng-show="false"&gt;
                  &lt;colgroup&gt;
                      &lt;col class="col-md-5"&gt;
                      &lt;col class="col-md-7"&gt;
                  &lt;/colgroup&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;User Profile&lt;/th&gt;
                          &lt;th style="text-align: -webkit-right"&gt;&lt;button class="btn-primary btn" id="editUserProfile_button" ng-click="editUserProfile()"&gt;Edit User Profile&lt;/button&gt;&lt;/th&gt;
                      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>when I click button then ng-hide class is added to first table editUserprofile. When I remove ng-hide class then this table is visible but second table is still visible although it's ng-show is false. Expecting, issue is related to $scope. </p>