AngularJS running outside ng-app scope?

First, ng-app should be to set the area where angular take place, right? Even if there is ng-controller tag outside ng-app, they should be omitted?

However, when I test on jsfiddle (link here), it seems this is not the case:

HTML

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    Hello, {{name}}!
    <input ng-model="name">
  </div>
</div><br><br>
<div class="not-inside-my-app">
  <div ng-controller="MyCtrl">
    ...... Some Many other content in real case that I don't want angular to touch .......<br>
    So this is to test angular is not working here.<br>
    Hello, {{name}}!
    <input ng-model="name">
  </div>
</div><br><br>
<div ng-app="myApp">
  <div ng-controller="MyCtrl2">
    Hello, {{name}}!
    <input ng-model="name">
  </div>  
</div>

Javascript

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
    $scope.name = 'Superhero';
}

myApp.controller('MyCtrl2', ['$scope', MyCtrlFunction2]);
function MyCtrlFunction2($scope) {
    $scope.name = 'Non-superhero';
}

The angular code is still working in the middle div. Is my concept on ng-app wrong? Or what have I missed to limit the scope?

P.S. I know I can control the scope by using ng-controller, but it seems to be a waste on resource to do scanning on sections that I know I don't need angularJS.