Show Hide Div AngularJs

Question

This is so strange and I have no idea why this simple scenario isn't working. I'm still fairly new to Angular after a life with jQuery and Backbone.

Here's the basic structure of the code...

<div class="span10" ng-controller="ClientCtrl" ng-hide="addClient">
  <button ng-click="addClient = true" class="btn btn-primary">
    Add new Client
  </button>
</div>
<div class="span10" ng-controller="ClientCtrl" ng-show="addClient">
  <div ng-include src="'views/partials/client.html'"></div>
</div>

The expected behavior is that clicking the 'Add New Client' button will show the second div. The actual behavior is that the first div gets hidden (as it should) but the second div stays hidden. There is no controlling behavior in the controller.

I've tried it with a scope function, setting the initial in the property in the controller and numerous other things without any luck. What am I doing wrong? I've checked to be sure they are on the same scope and that doesn't "seem" to be the problem. Thanks for the help because this is driving me crazy.

Answer 1

AngularJS creates two separate Controllers in this case as you have mapped two controllers using ng-controller attribute. The scope within one controller does not affects the scope of second.

You must do something like this:

<div ng-controller="ClientCtrl">
  <div class="span10" ng-hide="addClient">
    <button ng-click="addClient = true" class="btn btn-primary">
      Add new Client
    </button>
  </div>
  <div class="span10" ng-show="addClient">
    <div ng-include src="'views/partials/client.html'"></div>
  </div>
</div>