AngularJS controllers not showing data when ng-app not adjacent

Question

New Angular JS coder, minor issue.

Defining this:

<div>
    <div ng-controller="myController" ng-app="myApp">
        <div ui-grid="gridOptions" ui-grid-tree-view ui-grid-grouping class="grid"></div>
    </div>
</div>

and then

<script>
    var app = angular.module("myApp", [...])
    .controller("myController", [...,function(...){ ... }]);
</script>

works fine. I can populate data into the controller and the grid and the world is a fun and happy place.

Now. I change the markup to THIS (moving the ng-app up to an outer div):

<div ng-app="myApp">
    <div ng-controller="myController">
        <div ui-grid="gridOptions" ui-grid-tree-view ui-grid-grouping class="grid"></div>
    </div>
</div>

and the world apparently explodes. The grid no longer populates; the CSS for it is there but no data in it at all. I've tried in the contentplaceholder, I've tried in all the divs that contain that section of code, but at the most simple it still doesn't work if I move it so much as one element level up.

Details: child page inside a master (all the defines for angular are in the page itself, not in the master), several levels of element containers, can confirm that the data populates if the ng-app is in the same tag as the ng-controller, but not when it's above it.

Answer 1

Please take a look at the following plunker: http://plnkr.co/edit/NRyCjTonKrkcibd9607f?p=preview

Try to compare your code with this one, it uses the same html as you said that not working for you:

<div ng-app="app">
  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
  </div>
</div>