Show Hide Div AngularJs

Question

This is so weird and I have no idea why this simple script is not working. I'm still pretty new to Angular after living with jQuery and Backbone.

Here's the basic code structure ...

<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 is hidden (as it should), but the second div remains hidden. There is no control behavior in the controller.

I tried this with the scope function, setting the initial property in the controller and many other things with no luck. What am I doing wrong? I checked to make sure that they are on the same level and that does not seem to be a "problem". Thanks for the help because it drives me crazy.

Answer 1

In this case, AngularJS creates two separate controllers, since you mapped two controllers using the ng-controller attribute. The volume inside one controller does not affect the scope of the second.

You should 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>