Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Sandra Qu
Sandra Qu
577 Points

Angular multiple panels (controllers) on same page; one controller is not loading; using Angular and Foundation Apps

Hello Treehouse Community, I am learning Angular and Foundation Apps use of front matter. I have gone through both relevant courses and am now trying to build my own app, a messages app if you will. I would like to display two panels on the homepage (home.html). I would like the messages to be the right panel, and the left panel (a sidebar) to be generated from a filter based on the messages right panel. home.html does not have a declared controller, and it's front matter is simply the default. I am displaying the sidebar (and would prefer use a controller for that), and have added a ui-view to the page as such

---
name: home
url: /
---

<div class="grid-content medium-3">
My sidepanel accordion here
</div>

<div ui-view>
<!-- I presume this is where messages would show up -->
</div>

The messages.html I have made a child of home by using the front matter

---
name: home.messages
url: /templates/messages.html
controller: MessagesCtrl
---

The messages panel is not loading. How can I declare both the sidebar panel and messages right panel as controllers? How can I get both to load in home.html?