declare one controller for each tab

Question

I'm using tabs in an html page and I'm trying to declare one controller for each tab.

<div class="tab-content">
    <div class="tab-pane active" id="customerInfo">
        @customerList()
    </div>
    <div class="tab-pane" id="communities">
        @communityList()
</div>

For the first tab I declare my controller in "customerList" like this :

<div class="block full" ng-controller="customerCtrl">

and I tried the same thing with the second tab but it didn't work. Any help please.

It's hard to help with so little code here, I'd recommend creating a plnkr with what your trying to do. — haakon.io, Apr 19 '16 at 15:24
Thank you for your replay, what I want to do is simple, in the first tab I have a list of customers where I want to use customerCtrl and for the second tab which contains communities list I want to use another controller : communitiesCtrl — Rajeun, Apr 19 '16 at 15:33
I would look into using "controller as" to accomplish this. If you do a search for this you will find a ton of examples out there. — haakon.io, Apr 19 '16 at 15:42

score 0 · Accepted Answer · edited May 23 '17 at 11:45

This is possible and judging from here you can do this as simple as:

<body ng-app="">
<div class="tab-content">
    <div class="tab-pane active" id="customerInfo" ng-controller="customerListcontroller">
        @customerList()
    </div>
    <div class="tab-pane" id="communities" ng-controller="communityListcontroller">
        @communityList()
    </div>
</div>
</body>

There are few things you might be doing wrong:

forget to put ng-app="app" to wrap your controllers
From the question there is a div omission. Make sure this is not the case in the code
Not defining your controllers properly.
Not calling the file containing the controller in the HTML file

It should be a minor fix. You can also take a look at this.

declare one controller for each tab

1 Answers1