AngularJS: Why does my module not render in my webpage?

I have been coding a simple Single Page Application solution using Angular JS running a in content editor web part in SharePoint 2010.

I had the following code in my .aspx page:

<div class="table-cell mainbody">
<div>
<div id="first" ng-controller="Controller1" ng-include="src='/StyleLibrary/pages/first.Module.html'" ></div>
<div id="second" ng-controller="Controller2" ng-include="src='/StyleLibrary/pages/second.Module.html'" ></div>
</div>
</div>

However, when I ran $("#second") in my console window, I received an empty object.

Hmmmmmm.

It appears that that each module injection needs to be surrounded by its own DIV, so I change the code to the following to make it work:

<div class="table-cell mainbody"> 

<div>

<div id="first" ng-controller="Controller1" ng-include="src='/StyleLibrary/pages/first.Module.html'" ></div>

</div>

<div>

<div id="second" ng-controller="Controller2" ng-include="src='/StyleLibrary/pages/second.Module.html'" ></div>

</div>

</div>