title: Resetting an angularjs model; ng-show
body: <p>I'm trying to determine why calling my<code>$scope.reset()</code> method does not work as I hoped.  What I want to accomplish is: once the Reset button is clicked, the <code>values</code> object is re-initialized and its <code>theState</code> field is set to <code>'one'</code>.  This should cause the div with <code>id='one'</code> to be shown and it's 2 sibling to be hidden.  </p>
  
  <p>What actually happens when Reset is clicked is that all three <code>div</code> elements are hidden until I click one of the buttons labeled One,Two,Three.  I'm <i>assuming</i> that the reason this fails is that the actual object to which <code>ng-show</code> is bound is changing in <code>$scope.reset()</code> - but I don't know how to get the view to react as I want.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="AppCtrl"&gt;
    &lt;input type="button" ng-click="values.theState='one'" value="One"/&gt;
    &lt;input type="button" ng-click="values.theState='two'" value="Two"/&gt;
    &lt;input type="button" ng-click="values.theState='three'" value="Three"/&gt;
  
    &lt;div id="one" ng-show="values.theState=='one'"&gt;
      This is div=1
    &lt;/div&gt;
    &lt;div id="two" ng-show="values.theState=='two'"&gt;
      This is div=2
    &lt;/div&gt;
    &lt;div id="tre" ng-show="values.theState=='three'"&gt;
      This is div=3
    &lt;/div&gt;
  
    &lt;input type="button" ng-click="reset()" value="Reset"/&gt;           
  &lt;/div&gt;
  </code></pre>
  
  <p>AngularJS:</p>
  
  <pre><code>&lt;script&gt;
    var app = angular.module("app", []);
    app.controller("AppCtrl", function($scope) {
      $scope.values = {
        theState: 'one'
      };
  
      $scope.reset = function() {
        $scope.values = {};
        $scope.value.theState = 'one';                    
      }
    });
  &lt;/script&gt;
  </code></pre>