using ng elements outside of ng-controller

Question

I am inexperienced with angular.

I am using angular to create a series of nested divs (a form) on a webpage. The top div has ng-controller="controllername" as an attribute. Within the nested divs is a div with ng-show="showvar" as an attribute.

It looks like this.

<div class="page">
  <div ng-controller="controllername">
    <div ng-show="showvar">Hidden Stuff</div>
  </div>
</div>

When I perform functions on showvar to make it true, the div appears (and disappears when false) as intended.

I also have a completely separate div 'outside' the the original nest of divs with the ng-controller attribute. As such, there is no ng-controller attribute in this seperate hierarchy BUT I have nested another div inside with the ng-show="showvar" attribute.

Updated HTML structure is as such

<div class="page">
  <div ng-controller="controllername">
    <div ng-show="showvar">Hidden Stuff</div>
  </div>
  <div class="seperate">
    <div ng-show="showvar">More Hidden Stuff</div>
  </div>
</div>

When the page loads, both divs with ng-show="showvar" in the separate nests are hidden as ng-hide has been appended by angular. When I perform functions on showvar after the page load to make it true, only the div within the ng-controller div gets shown.

I (think I) understand this is because the ng elements are evaluated at page load (and appended with ng-hide, even outside the controller?) but only the ng elements within the div with the ng-controller attribute are evaluated when functions are performed after page load. Is this correct?

How can I get the other ng-show to be evaluate 'outside' of the ng-controller div?

I was thinking one option is to append ng-controller to the overall 'page' div instead of the nested div. But what other options do I have?

EDIT: I also tried simply adding ng-controller="controllername" to the separate div. I guess angular 'ignores' the duplicate ng-controller div?

Answer 1

The problem your facing is that the showvar resides in your controller's scope, your second usage of the showvar is not within that scope.

What you need to do is make sure the variable is available where needed.

Say you add the variable to the parentController (you don't have one in your example so I'll add one)

<div class="page" ng-controller="parentController">
  <div ng-controller="controllername">
    <div ng-show="showvar">Hidden Stuff</div>
  </div>
  <div class="seperate">
    <div ng-show="showvar">More Hidden Stuff</div>
  </div>
</div> 

app.controller('ParentController', function($scope){
  $scope.showvar = false;
});

problem with this is when you set showvar to true within your controllername controller it will set it in the innerscope and not the outer. When making sure you have the right scope by accessing it through another object you should be safe.

So try it like this:

<div class="page" ng-controller="parentController">
  <div ng-controller="controllername">
    <div ng-show="obj.showvar">Hidden Stuff</div>
  </div>
  <div class="seperate">
    <div ng-show="obj.showvar">More Hidden Stuff</div>
  </div>
</div> 

app.controller('ParentController', function($scope){
  $scope.obj = {
    showvar: false
  }
});

Quick demo