Whats going wrong
Whats happening here is that the markup inside you include is not being updated by your App.init(). In your first example all the markup is present when you call init. All the work that needs to be done to "activate" your menus and bind the correct events to them works correctly.
In your second example the controller has updated the markup with the include template and run the controller to fill in the bindings. This is inserted into the page after you have called init at the bottom of the page. So the event bindings to make the menu show up are not present.
The fix
If you call App.init() inside your OnTemplateLoaded() function in the controller then you will see that the menu now works.
Some things to note:
First EVERY time your controller data syncs it replaces the template and you will have to rebind the events to the markup in your include.
Second is that App.init() targets the entire page. When rebinding or binding for a specific template or feature in your template you should use a selector that will target just that.
Lastly, if the data that your using in your controller is not going to be updated after its rendered, eg your just pulling the menu contents from the server and they don't change. You can fine tune your document load actions to work around this. So, choose to register the documents events though only Angular or jQuery, then define the order of execution. In that call bind your angular module to the page and afterward call App.init();