title: How to dynamically update view in AngularJS
body: <p>I have 2 <code>div</code> elements as following and I want to show only one of them based on the <code>doStuff()</code> function being called in the controller when an anchor element is clicked.</p>
  
  <pre><code>&lt;div ng-controller='myController'&gt;
      &lt;div ng-show="{{states['currentState'] == 'A'}}"&gt;
          //displaying this div if the currentState is A
          &lt;a ng-click="doStuff('B')"&gt;Do stuff and show B&lt;/a&gt;
      &lt;/div&gt;
      &lt;div ng-show="{{states['currentState'] == 'B'}}"&gt;
          //displaying this div if the currentState is B
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is the controller code:</p>
  
  <pre><code>myApp.controller('myController', ['$scope', function($scope) {
  
    var states = ['A', 'B'];
    $scope.states = states;
    $scope.states['currentState'] = $scope.states['currentState'] || 'A';
  
    $scope.doStuff = function(stateToShow) {
      //doing stuff
      $scope.states['currentState'] = stateToShow;
    };
  
  }]);
  </code></pre>
  
  <p>The code above doesn't work as the state remains 'A' even after clicking the <strong>Do stuff and show B</strong> anchor element.</p>
  
  <p>Could somebody help me understand why is it not working?</p>
  
  <h2>Edit</h2>
  
  <p><strong>app.js</strong></p>
  
  <pre><code> //...
  
      .state('home', {
          url: '/',
          views: {
  
              '': { templateUrl: 'partials/index.html' },
  
              'myView@home': {
                  templateUrl: 'partials/myView.html',
                  controller: 'VehicleController'
              }
              //other named ui views
          }
  
      })
  
   //...  
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row margin-bottom-40"&gt;
              &lt;div class="col-md-12 col-sm-12"&gt;
                  &lt;div class="content-page"&gt;
                      &lt;div class="row"&gt;
                          &lt;div ui-view="myView"&gt;&lt;/div&gt;
                          &lt;!-- other named ui-views --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>myView.html</strong></p>
  
  <pre><code>&lt;div ng-controller='myController'&gt;
      &lt;div ng-show="states['currentState'] == 'A'"&gt;
          //displaying this div if the currentState is A
          &lt;a ng-click="doStuff('B')"&gt;Do stuff and show B&lt;/a&gt;
      &lt;/div&gt;
      &lt;div ng-show="states['currentState'] == 'B'"&gt;
          //displaying this div if the currentState is B
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>