title: AngularJS with ui-router ng-hide not working after initially working
body: <p>I've been struggling with a ng-hide issue in combination with using ui-router. Simple app. Index.html shows some data via the "notes" route, you click on "detail" and you go to the sub route "notes.note" to view the detail just below the other records. The "detail" html has a "Save" &amp; "Cancel" button.</p>
  
  <p>Now there is an "Add New" button when you are not viewing the detail with the attribute <strong><em>ng-hide="HideAddNew"</em></strong>. "HideAddNew" is a $scope variable in the controller. When I click "detail" on a row I have this <strong><em>ng-click="toggleAddNew()"</em></strong> on the link which in turn calls this</p>
  
  <pre><code>    $scope.toggleAddNew= function()
      {
          $scope.HideAddNew=($scope.HideAddNew ? false : true);
      }
  </code></pre>
  
  <p>That works perfectly, my detail shows and my "Add New" button has disappeared. Now on the detail when I click "Cancel" it fire off the <strong><em>ng-click="hideData()"</em></strong> which calls the function:</p>
  
  <pre><code>   $scope.hideData=function()
     {
          $scope.toggleAddNew();
          $state.go('notes');
     }
  </code></pre>
  
  <p>And now my "Add New" has disappeared even though the variable is set to false, i.e. Don't hide. I've tried $timeout in that "<strong>hideData</strong>" function and in the "<strong>toggleAddNew</strong>" function. I've tried putting <strong><em>"$scope.toggleAddNew();"</em></strong> after the <strong><em>"$state.go('notes');"</em></strong> too. I don't want to resort to manually adding and removing classes. AngularJS ver: <strong>v1.3.15</strong> , ui-router ver: <strong>v0.2.13</strong> Thanx all :)</p>
  
  <p><strong>EDIT</strong>
  Would the below work Tony?</p>
  
  <pre><code> &lt;button ng-if="HideAddNew" ng-click="SelectRoute('notenew')" class="btn btn-primary"&gt;
  &lt;span class="glyphicon glyphicon-plus -glyphicon-align-left"&gt;&lt;/span&gt;Add New&lt;/button&gt;
  </code></pre>